标签：open html pre ase z-index 旋转 elf add span
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="#">
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>
标签：open html pre ase z-index 旋转 elf add span
原文地址：http://www.cnblogs.com/Alexin/p/6838007.html
