css3多个圆圈动画

CSS3是前端开发中不可或缺的技术之一，其中动画效果是使用CSS3时最值得关注的一点。在CSS3中，圆圈动画特别常用，而通过组合多个圆圈来创建复杂的动画效果则更为实用。

.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  opacity: 0;
  animation: circle-anim 3s linear infinite;
}
@keyframes circle-anim {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.circle1 {
  width: 25px;
  height: 25px;
  border-width: 3px;
  border-style: solid;
  border-radius: 50%;
  border-top-color: #9a2b2b;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  animation: circle1-anim 3s linear infinite;
}
@keyframes circle1-anim {
  0% {
    transform: translate(-50%,-50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%,-50%) rotate(360deg);
  }
}
.circle2 {
  width: 75px;
  height: 75px;
  border-width: 3px;
  border-style: solid;
  border-radius: 50%;
  border-top-color: #5f9ea0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  animation: circle2-anim 3s linear infinite;
}
@keyframes circle2-anim {
  0% {
    transform: translate(-50%,-50%) rotate(360deg);
  }
}

上面的CSS代码中，我们定义了三个圆圈动画，其中.circle是用来控制整个动画的透明度，并通过animation属性控制动画的播放，while circle1和circle2是两个大小不同的圆圈，分别负责旋转和改变颜色。通过将这三个圆圈组合起来，我们可以创建出更为复杂的动画效果，使页面更加生动。