这里有一款网络上最好的加载器:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: white;
}
.container{
positition: relative;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.container .loader{
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #424242;
animation: animate 1s linear infinite;
}
@keyframes animate{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
.container .loader::before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background: linear-gradient(to top, transparent, dodgerblue);
background-size: 100px 180px;
background-repeat: no-repeat;
border-top-left-radius: 100px;
border-bottom-left-radius: 100px;
}
.container .loader::after{
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 10px;
height: 10px;
background-color: #00B0FF;
border-radius: 50%;
z-index: 10;
box-shadow: 0 0 10px #00B0FF,
0 0 20px #00B0FF,
0 0 30px #00B0FF,
0 0 40px #00B0FF,
0 0 50px #00B0FF,
0 0 60px #00B0FF,
0 0 70px #00B0FF,
0 0 80px #00B0FF,
0 0 90px #00B0FF,
0 0 100px #00B0FF;
}
.container .loader span{
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
border-radius: 50%;
background-color: #212121;
}
<div class="container">
<div class="loader">
<span></span>
</div>
</div>
我想修改代码或找到解决方案,以消除中心的黑色背景并使其透明,同时保持旋转器不变,但是当我从 container .loader span
中移除背景颜色时,旋转器完全毁坏。是否有任何解决方案可以在透明的中心具有相同的旋转效果?
#212121
背景色正在隐藏实际的动画内容。您可以尝试在旋转器下方插入相同的背景元素来替代它。 - tacoshy