实例：酷炫的环形加载动画
技术栈：HTML+CSS
效果：
源码：
【html】
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>酷炫的环形加载动画</title>
<link rel="stylesheet" href="../css/55.css">
</head>
<body>
<div class="container">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</body>
</html>
【css】
*{
/* 初始化 */
margin: 0;
padding: 0;
}
body{
/* 100%窗口高度 */
height: 100vh;
/* 弹性布局 居中 */
display: flex;
justify-content: center;
align-items: center;
background-color: #000;
}
.container{
/* 相对定位 */
position: relative;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.container .circle{
position: relative;
width: 150px;
height: 150px;
border-radius: 50%;
border: 5px solid transparent;
margin: -30px;
/* 通过var函数调用自定义属性--c（颜色值） */
border-top: 5px solid var(--c);
/* 通过var函数调用自定义属性--a（动画名） */
/* 执行动画：动画名 时长 线性的 无限次播放 */
animation: var(--a) 3s linear infinite;
}
/* 发光头 */
.container .circle::before{
content: "";
/* 绝对定位 */
position: absolute;
top: 12px;
right: 12px;
width: 15px;
height: 15px;
border-radius: 50%;
background-color: var(--c);
/* 阴影（发光效果） */
box-shadow:
0 0 5px var(--c),
0 0 10px var(--c),
0 0 20px var(--c),
0 0 40px var(--c),
0 0 80px var(--c);
}
/* 第三个圆 */
.container .circle:nth-child(3){
position: absolute;
top: -66.66px;
/* 设置自定义属性--c（颜色）、--a（动画） */
--c: lightgreen;
--a: animate2;
/* 动画延迟时间 */
animation-delay: -2s;
/* 调整边框 */
border-top: 5px solid transparent;
border-left: 5px solid var(--c);
}
/* 第二个圆 */
.container .circle:nth-child(2){
--c: lightsalmon;
--a: animate2;
animation-delay: -0.5s;
border-top: 5px solid transparent;
border-left: 5px solid var(--c);
}
/* 第一个圆 */
.container .circle:nth-child(1){
/* 设置自定义属性--c（颜色）、--a（动画） */
--c: lightskyblue;
--a: animate1;
}
.container .circle:nth-child(3):before,
.container .circle:nth-child(2):before{
/* initial关键字用于设置CSS属性为它的默认值 */
top: initial;
left: 12px;
bottom: 12px;
}
/* 定义动画 */
@keyframes animate1 {
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
@keyframes animate2 {
0%{
transform: rotate(360deg);
}
100%{
transform: rotate(0deg);
}
}
