[25天] 巧用border-radius实现波浪加载
先看看只用了一个div加上css实现的效果：
由于录制gif体积较大，所以只录了加载到一半的效果。
先帖上完整代码，如果不好读后面有大致的思路说明：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html,body{
background-color: #1d2129;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
@keyframes waves{
from{
transform: translateX(-50%) translateY(25%) rotate(0deg);
border-radius: 40%;
}
to{
transform: translateX(-50%) translateY(-25%) rotate(720deg);
border-radius: 50%;
}
}
.loading{
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #20ec19;
background-image: linear-gradient(90deg, #20ec19, #1162a5);
box-shadow: 0 0 0 1px #24721c, 0 0 0 10px #3c4557, 0 20px 30px #030711;
position: relative;
overflow: hidden;
}
.loading::before{
position: absolute;
content: '';
width: 400px;
height: 400px;
border-radius: 45%;
background-color: #1d2129;
left: 50%;
transform: translateX(-50%);
top: -150%;
animation: waves 10s linear infinite;
box-shadow: 0 0 5px #20ec19, 0 0 15px #4bd346 inset;
}
</style>
</head>
<body>
<div class="loading"></div>
</body>
</html>说一下实现的思路
波浪效果是用球的背景加另一个圆角矩形叠加的效果
先准备一个加载的球
<div class="loading"></div>
width: 200px; height: 200px; border-radius: 50%; background-color: #20ec19; background-image: linear-gradient(90deg, #20ec19, #1162a5); box-shadow: 0 0 0 1px #24721c, 0 0 0 10px #3c4557, 0 20px 30px #030711; border: 1px solid #fff; position: relative; overflow: hidden;
再准备一个用来叠加的元素，可以直接使用伪元素CSS
.loading::before{
position: absolute;
content: '';
width: 400px;
height: 400px;
border-radius: 45%;
background-color: #1d2129;
left: 50%;
transform: translateX(-50%);
top: -150%;
animation: waves 10s linear infinite;
box-shadow: 0 0 5px #20ec19, 0 0 15px #4bd346 inset;
}看下示意图
将白球的背景色设为水的颜色，将叠加绿色圆角矩形的背景色设空无水的空白颜色。两者再叠加就是波浪的效果。
怎么让波浪动起来呢
给绿色圆角矩形添加旋转动画，并改变圆角大小。波浪就涌起来了。
@keyframes waves{
from{
transform: translateX(-50%) translateY(25%) rotate(0deg);
border-radius: 40%;
}
to{
transform: translateX(-50%) translateY(-25%) rotate(720deg);
border-radius: 50%;
}
}
实现加载进度(水的上涨)。同样是给绿色矩形加动画。向上偏移，偏移大小自行计算。我这里白球是200， 绿球是400，所以偏移量是+-25%。
最后，给白球添加overflow: hidden;将绿球超出的部分隐藏。我们的简单加载动画就完成了！
2022-06-10 16:55:10
926
0
参与讨论