# 快速导航
# 实现效果
# 具体代码
点击即可查看
html 代码
<div class="bird">
<div class="big"></div>
<!-- 最外面的红色的圆圈 -->
<div class="middle"></div>
<!--中间白色的圈,黄色的圈,灰色的圈-->
<div class="small"></div>
<!--小嘴巴-->
</div>
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
css 代码
* {
margin: 0px;
padding: 0px;
} /*去除默认外边距、内边距*/
.bird {
width: 200px;
height: 200px;
margin: 50px auto;
position: relative;
}
.big,
.middle,
.small {
position: absolute;
transition: all 0.5s; /*动画过渡*/
border-radius: 50%;
border-style: solid;
transform: rotate(45deg); /*旋转*/
}
.big {
border-width: 100px;
border-color: transparent transparent #d72928 #db3e3d;
left: 0;
top: 0;
}
.middle {
border-width: 80px;
border-color: #f8d245 transparent #f2f2f2 #fff;
left: 10%;
top: 10%;
}
.small {
border-width: 40px;
border-color: transparent #f7a703 transparent transparent;
left: 30%;
top: 30%;
}
.small:before {
/* 小黑原点 */
content: '';
width: 20px;
height: 20px;
border-radius: 50%;
background: #000;
position: absolute;
top: -10px;
right: 20px;
}
.bird:hover .big {
transform: rotate(225deg);
border-color: transparent transparent #1fe8b6 #16d7a7;
}
.bird:hover .middle {
/* 逆时针炫转135度 */
transform: rotate(-135deg);
border-color: transparent #f8d245 #fff #f2f2f2;
}
.bird:hover .small {
/* 小眼睛 */
transform: rotate(135deg);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
# 分析
实现这一效果,主要利用了border,控制border的上,右,下,左. 结合伪类hover,css3 中的transform中的rotate旋转
← 汽车 VR-3D 旋转 时钟翻转 →
