这篇博客介绍了如何使用CSS实现一个有趣的加载动画，包括@keyframes规则的运用，创建了wave、wave-after和wave-before三个动画，分别定义元素在不同阶段的边框半径和位置变化，同时通过.ocean动画改变背景元素的位置，营造出波浪起伏的效果。整个加载组件使用了绝对定位、动画时间和延迟等属性，创造出流畅的视觉体验。
CSS
语言：
CSSSCSS
确定
@keyframes wave {
0% {
border-radius: 25%;
}
100% {
border-radius: 50%;
}
}
@keyframes wave-after {
0% {
border-radius: 25%;
left: -50px;
}
100% {
border-radius: 50%;
left: -42px;
}
}
@keyframes wave-before {
0% {
border-radius: 25%;
left: 44px;
}
100% {
border-radius: 50%;
left: 36px;
}
}
@keyframes ocean {
0% {
top: 0;
}
100% {
top: 10px;
}
}
body {
background: #26C6DA;
}
.loader {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 300px;
height: 30px;
animation: ocean .9s infinite alternate ease-in-out;
}
.loading,
.loading:after,
.loading:before {
width: 60px;
height: 60px;
border-radius: 50%;
border: 3px solid transparent;
border-bottom-color: #0097A7;
box-sizing: border-box;
}
.loading {
position: relative;
margin: auto;
margin-bottom: 10px;
animation: wave 1.1s infinite alternate ease-in-out;
}
.loading:after,
.loading:before {
position: absolute;
content: "";
displsy: block;
top: -3px;
}
.loading:after {
left: -44px;
animation: wave-after 1.1s infinite alternate ease-in-out;
}
.loading:before {
left: 38px;
animation: wave-before 1.1s infinite alternate ease-in-out;
}
扫一扫
455
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
