HTML5+CSS3从入门到精通之CSS3实现箭头hover变化-职坐标

HTML5+CSS3从入门到精通之CSS3实现箭头hover变化

沉沙 2019-03-08 来源：阅读 1273 评论 0

摘要：本篇文章探讨了HTML5+CSS3从入门到精通之CSS3实现箭头hover变化，希望阅读本篇文章以后大家有所收获，帮助大家对相关内容的理解更加深入。

本篇文章探讨了HTML5+CSS3从入门到精通之CSS3实现箭头hover变化，希望阅读本篇文章以后大家有所收获，帮助大家对相关内容的理解更加深入。

HTML5+CSS3从入门到精通之CSS3实现箭头hover变化

1 <!DOCTYPE html>
2 <html>
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>
73     <a class="addr-more-btn up-down-btn" href="#">
74         more
75         <i>
76             <i></i>
77             <i></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)）。