css水滴波纹效果html,CSS实现水波纹进度效果

实现水波纹效果可以使用CSS3的animation和transform属性，代码如下：

HTML代码：

<div class="circle"></div>

CSS代码：

.circle {
  width: 200px;
  height: 200px;
  background-color: #008CBA;
  border-radius: 50%;
  position: relative;
}

.circle:before {
  content: "";
  display: block;
  padding-top: 100%;
}

.circle:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
  background-repeat: no-repeat;
  background-position: 50%;
  transform: scale(10, 10);
  opacity: 0;
  transition: transform 0.5s, opacity 1s;
}

.circle:hover:after {
  transform: scale(50, 50);
  opacity: 0.5;
  transition: transform 0.5s, opacity 1s;
}

这个例子中，我们创建了一个圆形的div元素，并使用伪元素:before来创建一个正方形的占位符，以便让它的高度与宽度相等。然后使用伪元素:after来创建水波纹效果，使用CSS3的radial-gradient属性来创建一个白色圆形，并将它的透明度设置为0.01%。然后通过:hover伪类来触发水波纹效果的动画。