原文地址：https://segmentfault.com/a/1190000014700727
HTML代码：
1 <html> 2 <head> 3 <link rel="stylesheet" href="index.css"> 4 </head> 5 <body> 6 <div class="circle"></div> 7 </body> 8 </html>
CSS代码：
1 html,
2 body ,
3 .circle{
4 margin: 0;
5 padding: 0;
6 height: 100%;
7 display: flex;
8 justify-content: center;
9 align-items: center;
10
11 }
12 /* 画出中间的实心圆 */
13 /* :root是一个CSS伪类，它匹配文档的根元素 – <html>元素。
14 w3 相关地址 http://www.w3school.com.cn/cssref/css_selectors.asp */
15 :root {
16 --innerRadius: 2em;
17 }
18 .circle {
19 width: calc(var(--innerRadius) * 2);
20 height: calc(var(--innerRadius) * 2);
21 background-color: lime;
22 border-radius: 50%;
23 /* 画出圆环 */
24 box-shadow: 0 0 0 calc(var(--innerRadius) - 0.4em) white,
25 0 0 0 var(--innerRadius) lime;
26 position: relative;
27 }
28 /* 用伪元素 ::before 画出动画用到的圆环 ； 用伪元素 ::after 再画出一个动的圆环*/
29 .circle::before,
30 .circle::after {
31 content: ‘‘;
32 position: absolute;
33 width: calc(var(--innerRadius) * 2 * 2);
34 height: calc(var(--innerRadius) * 2 * 2);
35 border: 2px solid lime;
36 border-radius: 50%;
37 animation: pulse 2s linear infinite;
38 }
39 .circle::after {
40 animation-delay: 1s;
41 }
42 /* 增加动画效果
43 优化动画——增加渐淡和弹性效果 */
44 @keyframes pulse {
45 from {
46 /* scale(x,y)定义 2D 缩放转换，改变元素的宽度和高度。*/
47 transform: scale(1);
48 filter: opacity(0.9);
49 }
50
51 to {
52 transform: scale(2);
53 filter: opacity(0);
54 }
55 }
原文地址：https://www.cnblogs.com/FlyingLiao/p/10164056.html
时间： 2024-10-07 17:40:01