css3动画 圆形扩散

CSS3动画是现代Web开发中不可或缺的技术之一。圆形扩散是CSS3动画中的一种独特体验，它可以帮助你为网站增添更多的美感和动态效果。

.circle {
  width: 200px;
  height: 200px;
  position: relative;
  overflow: hidden;
}

.circle:before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #fff;
  animation: circleAnim 1s ease-out infinite;
}

@keyframes circleAnim {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(100);
    opacity: 0;
  }
}

上面的代码可以实现一个具有圆形扩散效果的动画。我们先创建了一个圆形的容器，并设置为相对定位，溢出会被隐藏。接着在容器内部创建一个伪元素，并设置为绝对定位，居中对齐，并且设为白色圆形。

最后通过animation属性设置圆形伪元素的动画效果，实现了从内到外的圆形扩散效果。

以上就是实现CSS3动画圆形扩散的核心代码。相信通过不断的尝试和实践，大家一定可以创造出更多精彩的动画效果。