css两层旋转动画效果图

CSS是前端开发中不可或缺的技术之一，它可以实现很多酷炫的动画效果。今天，我们就来学习如何实现一个两层旋转动画效果图。

HTML代码：
<div class="wrapper">
  <div class="circle1"></div>
  <div class="circle2"></div>
</div>

CSS代码：
/* 动画 */
@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* 容器 */
.wrapper {
  width: 200px;
  height: 200px;
  position: relative;
}

/* 内部圆形 */
.circle1 {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 10px solid #fff;
  animation: rotate 2s ease-out infinite;
}

/* 外部圆形 */
.circle2 {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 10px solid #f00;
  animation: rotate 4s ease-out infinite;
} 

在HTML中，我们创建了一个名为“wrapper”的div容器，并在其中放置了两个div元素，分别为“circle1”和“circle2”。两个圆形都使用了CSS3中的border-radius属性制作圆形，并使用position属性定位到中心位置。同时设置了不同颜色的border属性。

在CSS中，我们为两个圆形都设置了旋转动画，并且时间和方向都不同，从而形成了两层旋转的效果。同时，使用了transform属性将两个圆形完美定位到中心位置。

以上就是制作两层旋转动画效果图的全部步骤，我们可以根据需要进行样式的修改，来实现不同的效果。