大家好,我是 Just,这里是「设计师工作日常」,今天分享的是使用 css 模拟一个丝滑的水波纹加载效果。
最新文章通过公众号「设计师工作日常」发布。
目录
整体效果
知识点:
① 伪元素的灵活使用
② 多个animation
动画的配合使用
思路: 先画一个带背景的圆形,然后利用伪元素创建两个不同圆角矩形,放在圆形上层,遮挡圆形背景,然后加上旋转以及上移动画就可以了。
核心代码部分,简要说明了写法思路;完整代码在最后,可直接复制到本地运行。
核心代码
html 代码
.waterbox53
圆形主体,以及水波纹主体。
css 部分代码
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 页面
css 样式
页面渲染效果
以上就是所有代码,以及简单的思路,希望对你有一些帮助或者启发。
我是 Just,这里是「设计师工作日常」,求点赞求关注!