其他
现代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.效果预览
大家都在看