如图：
代码：
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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
| <style>
* {
box-sizing: border-box;
margin:auto auto;
}
.rainbow {
height: 200px;
overflow: hidden;
margin:100px;
}
.rainbow div {
overflow: hidden;
}
.rainbow > div {
width: 400px;
height: 400px;
background-color: #FF0000;
border-radius: 50%;
overflow: hidden;
}
.rainbow > div > div {
width: 380px;
height: 380px;
margin: 10px;
background-color: #FF7F00;
border-radius: 50%;
}
.rainbow > div > div > div {
width: 360px;
height: 360px;
margin: 10px;
background-color:#FFFF00;
border-radius: 50%;
}
.rainbow > div > div > div > div {
width: 340px;
height: 340px;
margin: 10px;
background-color: greenyellow;
border-radius: 50%;
}
.rainbow > div > div > div > div > div{
width: 320px;
height: 320px;
margin: 10px;
background-color: cyan;
border-radius: 50%;
}
.rainbow > div > div > div > div > div > div{
width: 300px;
height: 300px;
margin: 10px;
background-color: blue;
border-radius: 50%;
}
.rainbow > div > div > div > div > div > div > div{
width: 280px;
height: 280px;
margin: 10px;
background-color: purple;
border-radius: 50%;
}
.rainbow > div > div > div > div > div > div > div > div {
width: 260px;
height: 260px;
margin: 10px;
background-color: white;
border-radius: 50%;
}
</style>
<div class="rainbow">
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
|
在掘金上看到别人实现的动态彩虹效果，觉得不错也实践了下：
源代码
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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
| <style>
* {
margin:0;
padding:0;
}
.center {
position: absolute;
top:40%;
left:50%;
transform: translate(-50%,-50%);
}
.center ul{
position: relative;
width:500px;
height:320px;
overflow:hidden;
border-bottom: 1px solid rgba(0,0,0,.2);
}
.center ul li {
list-style: none;
border-radius: 50%;
border: 20px solid #000;
position: absolute;
top: 100%;
left: 50%;
border-bottom-color: transparent !important;
border-left-color: transparent !important;
box-shadow: 0 0 10px rgba(0, 0, 0, .5);
transform: translate(-50%, -50%);
animation: animate 5s infinite alternate;
}
.center ul li:nth-child(1) {
width: 80px;
height: 80px;
border-color: #9400D3;
animation-delay: 0.2s;
}
.center ul li:nth-child(2) {
width: 120px;
height: 120px;
border-color: blue;
animation-delay: 0.4s;
}
.center ul li:nth-child(3) {
width: 160px;
height: 160px;
border-color: cyan;
animation-delay: 0.6s;
}
.center ul li:nth-child(4) {
width: 200px;
height: 200px;
border-color: #00FF00;
animation-delay: 0.8s;
}
.center ul li:nth-child(5) {
width: 240px;
height: 240px;
border-color:#FFFF00;
animation-delay: 1s;
}
.center ul li:nth-child(6) {
width: 280px;
height: 280px;
border-color: #FF7F00;
animation-delay: 1.2s;
}
.center ul li:nth-child(7) {
width: 320px;
height: 320px;
border-color:#FF0000;
animation-delay: 1.4s;
}
@keyframes animate {
0% {
transform: translate(-50%, -50%) rotate(-45deg);
}
100% {
transform: translate(-50%, -50%) rotate(315deg);
}
}
</style>
<div class="center">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
|
通过设置li的border属性，渲染了一个20px的边框，然后设置border左侧和底部的颜色为透明色，并将border-radius的设置为50%形成一个半圆。
动画效果用的是CSS3中的animation动画属性，通过 @keyfroms 关键词定义相关动画，然后用 animation来执行。最后再给每个li单独添加一个延迟执行的animation-delay属性。