发光渐变环形加载器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>发光渐变环形加载器</title>
</head>
<body>
<div class="loader"></div>
<div class="loader"></div>
<div class="loader"></div>
</body>
</html>
*{
margin: 0;
padding: 0;
}
body{
margin: auto;
width: 800px;
height: 500px;
background: black;
position: relative;
top: 200px;
/*弹性容器*/
display:flex;
flex-direction:row;/*设置主轴方向*/
justify-content:space-around;/*设置主轴的分布*/
align-items:center;/*设置侧轴的分布*/
}
.loader{
width: 150px;
height: 150px;
border-radius:50% ;
background: black;
background: linear-gradient(45deg,transparent,transparent 40%,yellow);
animation: go 0.5s linear infinite ;/*动画*/
}
@keyframes go{
0%{
transform: rotate(0deg);
filter: hue-rotate(0deg);/*色相旋转:角度,*/
}
100%{
transform: rotate(360deg);
filter: hue-rotate(360deg);
}
}
.loader:before{
content: " ";
display: block;
position: absolute;
top:-6px;
left: -6px;
bottom: -6px;
right: -6px;
border-radius: 50%;
/*
* linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。
*/
background: linear-gradient(45deg,transparent,transparent 40%,yellow);
filter: blur(15px);
}
.loader:after{
content: " ";
display: block;
position: absolute;
top:10px;
left: 10px;
bottom: 10px;
right: 10px;
border-radius: 50%;
background: black;
}