想学波纹效果？我教你呀

波纹效果展示

看上去是不是很高大上，其实明白了原理很简单。

原理

利用border-radius画出 2 个不规则的圆，调整到合适位置，让圆超出父级一部分，然后父级设置overflow:hidden就可以了。然后将圆添加 CSS3 动画效果，实现旋转动画。

如果还有点懵的话，那我就直接点，上代码。

开始制作

首先我们先写个 div，设置好宽高和颜色。

<div class="cole">div>

.cole {
     
  position: relative;
  width: 400px;
  height: 400px;
  background-color: rgb(41, 98, 255);
  left: calc(50% - 200px);
  top: 100px;
}

然后开始画圆

第一个圆，我们画个白色的，调整好位置后大概就这样（后期可能还需要微调数据）

.cole::before {
     
  content: '';
  display: block;
  width: 400px;
  height: 470px;
  border-radius: 45%;
  background-color: #fff;
  position: absolute;
  top: -45%;
  left: -20%;
}

第二个圆，我们画个红色的，调整好位置后大概就这样（后期可能需要微调数据）

.cole::after {
     
  content: '';
  display: block;
  width: 400px;
  height: 470px;
  border-radius: 45%;
  background-color: #f50057;
  position: absolute;
  top: -55%;
  left: -25%;
}

我们给 cole 添加样式：overflow:hidden和border-radius:50%
分别代表超出内容隐藏以及圆角边框。

.cole {
     
  position: relative;
  width: 400px;
  height: 400px;
  background-color: rgb(41, 98, 255);
  left: calc(50% - 200px);
  top: 100px;
  overflow: hidden;
  border-radius: 50%;
}

这时候是不是感觉已经初具雏形了，别急，我们还没加上动画。

动起来

首先先设置关键帧动画

@keyframes rotate {
     
  50% {
     
    transform: rotate(180deg); //旋转180°(半圈)
  }
  100% {
     
    transform: rotate(360deg); //旋转360°(一圈)
  }
}

然后给两个圆添加动画上去

.cole::before {
     
  content: '';
  display: block;
  width: 400px;
  height: 470px;
  border-radius: 45%;
  background-color: #fff;
  position: absolute;
  top: -45%;
  left: -20%;
  animation: rotate 5s linear infinite; //动画
}
.cole::after {
     
  content: '';
  display: block;
  width: 400px;
  height: 470px;
  border-radius: 45%;
  background-color: #f50057;
  position: absolute;
  top: -55%;
  left: -20%;
  animation: rotate 5s linear infinite; //动画
}

完成啦！

（如果效果不满意，可以自己去微调以下数据）
波纹效果学习完了，是不是感觉很简单呢，波纹效果运用场景很多，比如手机的充电动画，海浪动画等等…
学会了怎么去实现波纹效果，大家也可以去发挥自己的想象，动手去实践一下吧！