大家好,我是 Just,这里是「设计师工作日常」,今天分享的是使用 css 模拟一个丝滑的水波纹加载效果。
最新文章通过公众号「设计师工作日常」发布。
(目录)
整体效果
知识点: ① 伪元素的灵活使用 ② 多个
animation
动画的配合使用
思路: 先画一个带背景的圆形,然后利用伪元素创建两个不同圆角矩形,放在圆形上层,遮挡圆形背景,然后加上旋转以及上移动画就可以了。
核心代码部分,简要说明了写法思路;完整代码在最后,可直接复制到本地运行。
核心代码
html 代码
<div class="waterbox53">
<div class="loadwave53"></div>
</div>
.waterbox53
圆形主体,以及水波纹主体。
css 部分代码
.waterbox53{
width: 100px;
height: 100px;
border: 1px solid white;
box-shadow: 0 0 0 2px blue;
border-radius: 50%;
overflow: hidden; /* 限制溢出 */
position: relative;
}
.loadwave53{
width: 100%;
height: 100%;
border-radius: 50%;
background: blue;
}
.loadwave53:before,.loadwave53:after{
content: '';
width: 200px;
height: 200px;
left: -50px;
position: absolute;
z-index: 5;
}
.loadwave53:before{
border-radius: 44%;
background: #ffffff;
animation: rotatewaveeff53 6s linear infinite,loadwaveeff53 10s linear infinite;
}
.loadwave53:after{
border-radius: 38%;
background: rgb(255,255,255,0.5);
animation: rotatewaveeff53 8s linear infinite,loadwaveeff53 10s linear infinite;
}
@keyframes rotatewaveeff53{
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes loadwaveeff53{
0% {
top: -100px;
}
100% {
top: -210px;
}
}
1、先画出外形圆形边框 .waterbox53。并且限制内容溢出
overflow: hidden;
。
2、然后定义水波背景层
.loadwave53
,定义水波的颜色背景background: blue;
;然后利用伪元素:before
和:after
创建两个圆角矩形,并且让其层级在上z-index: 5;
形成遮挡,然后设置不同的圆角值border-radius: xx
;再分别给两个伪元素设置不同的背景background: #ffffff;
和background: rgb(255,255,255,0.5);
,形成视觉上一个比较立体的水波纹。
3、最后给两个伪元素分别设置两个不同的动画,一是让其伪元素旋转 360°,形成视觉上一个水波纹在晃动的效果;然后再让伪元素从底部缓慢上升,形成水波纹在不断上升的效果。
完整代码如下
html 页面
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>水波纹加载效果</title>
</head>
<body>
<div class="app">
<div class="waterbox53">
<div class="loadwave53"></div>
</div>
</div>
</body>
</html>
css 样式
/** style.css **/
.app{
width: 100%;
height: 100vh;
background-color: #ffffff;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.waterbox53{
width: 100px;
height: 100px;
border: 1px solid white;
box-shadow: 0 0 0 2px blue;
border-radius: 50%;
overflow: hidden;
position: relative;
}
.loadwave53{
width: 100%;
height: 100%;
border-radius: 50%;
background: blue;
}
.loadwave53:before,.loadwave53:after{
content: '';
width: 200px;
height: 200px;
left: -50px;
position: absolute;
z-index: 5;
}
.loadwave53:before{
border-radius: 44%;
background: #ffffff;
animation: rotatewaveeff53 6s linear infinite,loadwaveeff53 10s linear infinite;
}
.loadwave53:after{
border-radius: 38%;
background: rgb(255,255,255,0.5);
animation: rotatewaveeff53 8s linear infinite,loadwaveeff53 10s linear infinite;
}
@keyframes rotatewaveeff53{
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes loadwaveeff53{
0% {
top: -100px;
}
100% {
top: -210px;
}
}
页面渲染效果
以上就是所有代码,以及简单的思路,希望对你有一些帮助或者启发。
我是 Just,这里是「设计师工作日常」,求点赞求关注!