其他
现代CSS：纯 CSS 实现酷炫的 Loading 漩涡动画
1.快速创建页面框架
使用 html:5 和 div.loader 快速创建页面框架。
<div class="loader"></div>
2.增加基础样式
首先通过 position:fixed 将 .loader 容器相对于 body 定位，然后通过 transform: translate() 实现水平、垂直居中，最后通过 border-top 对顶部边框进行设置。
body {
background-color: #121212;
height: 100vh;
}
.loader {
position: relative;
top: 50%;
left: 50%;
width: 5em;
height: 5em;
transform: translate(-50%, -50%);
border-top: 5px solid #ff2281;
border-radius: 50%;
}
效果如下：
3.绘制其余两条曲线
使用::before 和::after 伪元素绘制这些 2 条曲线，::before 元素的宽度和高度为父元素的 80%，::after 元素的宽度和高度为父元素的 50%，同样只对顶部边框进行样式设计。
.loader {
&::before,
&::after {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
content: "";
border-radius: inherit;
}
&::before {
width: 80%;
height: 80%;
border-top: 4px solid #75d5fd;
}
&::after {
width: 50%;
height: 50%;
border-top: 3px solid #7fff00;
}
}
效果如下：
4.增加动画
给 3 条曲线增加 rotate 动画，从 0% - 100% 旋转 360deg，同时给 ::before 和 ::after 伪元素增加了动画延时，以实现螺旋效果。
.loader {
animation: rotate 1s ease-in-out infinite;
&::before,
&::after {
animation: rotate 2s ease-in-out infinite;
}
&::before {
animation-delay: 200ms;
}
&::after {
animation-delay: 500ms;
}
}
@keyframes rotate {
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}
5.效果预览
大家都在看