css3的一個小demo（箭頭hover變化）

時間 2020-03-21

標籤 css3 css 一個 demo 箭頭 hover 變化欄目 CSS 简体版

原文原文鏈接

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <style type="text/css">
 6 a{text-decoration: none;
 7     color: #EE7A23;}
 8 
 9         .select-self-area .select-btn .i-up-down {
10             width: 8px;
11             top: 0;
12             left: 0; }
13         .select-self-area .select-btn .i-up-down i {
14             width: 5px;
15             height: 2px;
16             background-color: #605F5F; }
17 
18         .select-self-open .i-up-down .i-up-down-l {
19             left: 0;
20             -ms-transform: rotate(-40deg);
21             transform: rotate(-40deg);
22             transition: transform .3s ease-out; }
23         .select-self-open .i-up-down .i-up-down-r {
24             right: 0;
25             -ms-transform: rotate(40deg);
26             transform: rotate(40deg);
27             transition: all .3s ease-out; }
28 
29 
30 
31         .select-self:hover .i-up-down-l, .up-down-btn:hover .i-up-down-l, .up-down-btn.open .i-up-down-l {
32             -ms-transform: rotate(-40deg);
33             transform: rotate(-40deg);
34             transition: all .3s ease-out; }
35         .select-self:hover .i-up-down-r, .up-down-btn:hover .i-up-down-r, .up-down-btn.open .i-up-down-r {
36             -ms-transform: rotate(40deg);
37             transform: rotate(40deg);
38             transition: all .3s ease-out; }
39 
40         .i-up-down {
41             position: relative;
42             display: inline-block;
43             width: 14px;
44             height: 6px;
45             vertical-align: middle;
46             z-index: 2;
47             -ms-transform: translateY(2px);
48             transform: translateY(2px);
49             transition: transform .3s ease-out; }
50         .i-up-down i {
51             position: absolute;
52             top: 0;
53             width: 8px;
54             height: 1px;
55             background: #EE7A23; }
56         .i-up-down .i-up-down-l {
57             left: 0;
58             -ms-transform: rotate(40deg);
59             transform: rotate(40deg);
60             transition: transform .3s ease-out; }
61         .i-up-down .i-up-down-r {
62             right: 0;
63             -ms-transform: rotate(-40deg);
64             transform: rotate(-40deg);
65             transition: transform .3s ease-out; }
66 
67 
68     </style>
69     <title>箭頭顯示</title>
70 </head>
71 <body>
72 <div class="shipping-addr-more">
73     <a class="addr-more-btn up-down-btn" href="#">
74         more<!--利用css3樣式旋轉，使箭頭變化-->
75         <i class="i-up-down">
76             <i class="i-up-down-l"></i>
77             <i class="i-up-down-r"></i>
78         </i>
79     </a>
80 </div>
81 </body>
82 </html>

主要是利用css3的transform的旋轉變化來修改css

其中transtion語法：html

transition: property duration timing-function delay;
transition:  過渡效果的 CSS 屬性的名稱  渡效果須要多少秒或毫秒  過渡效果什麼時候開始

ease 規定慢速開始，而後變快，而後慢速結束的過渡效果（cubic-bezier(0.25,0.1,0.25,1)）。 css3

ease-in 規定以慢速開始的過渡效果（等於 cubic-bezier(0.42,0,1,1)）。 spa

ease-out 規定以慢速結束的過渡效果（等於 cubic-bezier(0,0,0.58,1)）。 code

ease-in-out 規定以慢速開始和結束的過渡效果（等於 cubic-bezier(0.42,0,0.58,1)）。orm

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。