有趣的css - 水波纹加载动画

最新推荐文章于 2024-05-29 10:53:24 发布

设计师工作日常

最新推荐文章于 2024-05-29 10:53:24 发布

阅读量1.1k

点赞数 32

分类专栏：有趣的css 文章标签： css ux/ui 动效设计动画加载动画水波纹效果

本文链接：https://blog.csdn.net/justliu1989/article/details/138897704

版权

有趣的css 专栏收录该内容

69 篇文章 1 订阅

订阅专栏

大家好，我是 Just，这里是「设计师工作日常」，今天分享的是使用 css 模拟一个丝滑的水波纹加载效果。

《有趣的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;
  }
}