css怎么做水波纹

CSS是开发前端页面常用的一种样式语言，十分强大。其中，水波纹效果是很酷的一个效果，下面我们就来看看CSS怎么做水波纹。

.wave {
  width: 150px;
  height: 150px;
  position: relative;
  margin: 30px auto;
  background-color: #4BC0C0;
  border-radius: 50%;
}

.wave:before,.wave:after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background-color: rgba(255,255,0.5);
  top: 0;
  left: 0;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.wave:before {
  width: 200px;
  height: 200px;
  margin-top: -25px;
  margin-left: -25px;
  animation-name: waveBefore;
}

.wave:after {
  width: 150px;
  height: 150px;
  margin-top: -75px;
  margin-left: -75px;
  animation-name: waveAfter;
}

@keyframes waveAfter {
  0% {
    transform: scale(0.9);
    opacity: 1;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

@keyframes waveBefore {
  0% {
    transform: scale(0.9);
    opacity: 0.7;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

css怎么做水波纹

上述代码主要涉及到CSS3里的两个属性：animation和transform。animation控制动画，我们在before和after伪类中分别设置了动画名称、时间和循环次数。transform控制元素的形态和位置，通过设置scale（放大倍数）来实现水波纹效果的视觉效果。

在这个例子中，我们通过before和after伪类来实现水波纹的效果，before用来扩散，after用来消失。通过不同的动画名称实现两个动画的不同效果。

在HTML中，我们可以这样写：

这个例子中的wave类可以用来承载水波纹效果。

在实际项目中，我们可以通过设置不同的颜色和大小来实现多样化的水波纹效果。CSS是非常灵活的样式语言，希望本文能够为大家提供一些帮助。

相关推荐