[分享]css3同心圆扩散动画

CSS3同心圆扩散动画是一种炫酷的动画效果，它有着流畅的转换和层次感，赋予网页更加生动的展现形式。下面就让我们来了解一下如何实现这种动画效果。HTML5代码： CSS3代码： /CSS...

CSS3同心圆扩散动画是一种炫酷的动画效果，它有着流畅的转换和层次感，赋予网页更加生动的展现形式。下面就让我们来了解一下如何实现这种动画效果。

HTML5代码：
<!--HTML代码-->
<div class="wrap">
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
</div>

CSS3代码：
/*CSS代码*/
.wrap {
  position: relative;
  height: 200px;
  width: 200px;
}
.circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  border-radius: 50%;
  animation: scale 1.5s linear infinite;
  border: 2px solid #fff;
}
.circle:nth-child(1) {
  width: 100%;
  height: 100%;
}
.circle:nth-child(2) {
  width: 80%;
  height: 80%;
  animation-delay: -0.3s;
}
.circle:nth-child(3) {
  width: 60%;
  height: 60%;
  animation-delay: -0.6s;
}
.circle:nth-child(4) {
  width: 40%;
  height: 40%;
  animation-delay: -0.9s;
}
.circle:nth-child(5) {
  width: 20%;
  height: 20%;
  animation-delay: -1.2s;
}
.circle:nth-child(6) {
  width: 10%;
  height: 10%;
  animation-delay: -1.5s;
}
@keyframes scale {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.0);
    opacity: 0;
  }
} 

上面的代码中，我们创建了一个父级wrap元素，以及6个子级circle元素，通过CSS的属性进行展示。

理解这段代码你需要了解以下几个方面：

1. wrap元素设置为相对定位，position:relative;

2. circle元素设置为绝对定位，position:absolute;，然后通过transform属性和动画animation属性实现扩散效果

3. nth-child选择器用于选择子级circle元素，并设置它们的大小比例，以及动画间隔

4. 关键属性包括：animation、transform、border-radius、width、height、animation-delay、opacity等

5. 关键帧属性：keyframes，通过这个属性来实现动画效果

CSS3同心圆扩散动画是一种炫酷的动画效果，它为网页的视觉效果增加了一份生动感，让用户有一种极致的视觉享受。学会这种效果的实现，可以让你的页面更加精彩。