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的旋转变化来修改
其中transtion语法：
transition: property duration timing-function delay;
transition: 过渡效果的 CSS 属性的名称 渡效果需要多少秒或毫秒 过渡效果何时开始
ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。