首页 > 代码库 > css3的一个小demo（箭头hover变化）

css3的一个小demo（箭头hover变化）

2024-09-21 01:56:00   219人阅读

 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>

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style type="text/css">
a{text-decoration: none;
color: #EE7A23;}

        .select-self-area .select-btn .i-up-down {
            width: 8px;
top: 0;
left: 0; }
        .select-self-area .select-btn .i-up-down i {
            width: 5px;
height: 2px;
background-color: #605F5F; }

        .select-self-open .i-up-down .i-up-down-l {
            left: 0;
-ms-transform: rotate(-40deg);
transform: rotate(-40deg);
transition: transform .3s ease-out; }
        .select-self-open .i-up-down .i-up-down-r {
            right: 0;
-ms-transform: rotate(40deg);
transform: rotate(40deg);
transition: all .3s ease-out; }



        .select-self:hover .i-up-down-l, .up-down-btn:hover .i-up-down-l, .up-down-btn.open .i-up-down-l {
            -ms-transform: rotate(-40deg);
transform: rotate(-40deg);
transition: all .3s ease-out; }
        .select-self:hover .i-up-down-r, .up-down-btn:hover .i-up-down-r, .up-down-btn.open .i-up-down-r {
            -ms-transform: rotate(40deg);
transform: rotate(40deg);
transition: all .3s ease-out; }

        .i-up-down {
            position: relative;
display: inline-block;
width: 14px;
height: 6px;
vertical-align: middle;
z-index: 2;
-ms-transform: translateY(2px);
transform: translateY(2px);
transition: transform .3s ease-out; }
        .i-up-down i {
            position: absolute;
top: 0;
width: 8px;
height: 1px;
background: #EE7A23; }
        .i-up-down .i-up-down-l {
            left: 0;
-ms-transform: rotate(40deg);
transform: rotate(40deg);
transition: transform .3s ease-out; }
        .i-up-down .i-up-down-r {
            right: 0;
-ms-transform: rotate(-40deg);
transform: rotate(-40deg);
transition: transform .3s ease-out; }


    </style>
    <title>箭头显示</title>
</head>
<body>
<div class="shipping-addr-more">
    <a class="addr-more-btn up-down-btn" href=http://www.mamicode.com/"#">
        more<!--利用css3样式箭头变化-->
<i class="i-up-down">
            <i class="i-up-down-l"></i>
            <i class="i-up-down-r"></i>
        </i>
    </a>
</div>
</body>
</html>

css3的一个小demo（箭头hover变化）


联系
我们