html同心圆旋转动画

可以使用CSS3的动画来实现同心圆旋转动画。具体实现步骤如下：

1. 创建一个div容器，设置宽高和背景颜色，作为同心圆的容器。
2. 在容器中创建多个div元素，每个div元素的宽高和位置都不同，通过设置border-radius属性来实现同心圆的效果。
3. 使用CSS3的@keyframes规则定义旋转动画，设置transform: rotate()属性来实现旋转效果。
4. 将动画应用到容器上，使用animation属性来设置动画名称、持续时间、动画速度等参数。

以下是示例代码：

HTML代码：

<div class="circle-container">
  <div class="circle1"></div>
  <div class="circle2"></div>
  <div class="circle3"></div>
  <div class="circle4"></div>
</div>

CSS代码：

.circle-container {
  width: 200px;
  height: 200px;
  background-color: #ccc;
  position: relative;
}

.circle1 {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  position: absolute;
  top: 25px;
  left: 25px;
}

.circle2 {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  top: 50px;
  left: 50px;
}

.circle3 {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  position: absolute;
  top: 75px;
  left: 75px;
}

.circle4 {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  position: absolute;
  top: 100px;
  left: 100px;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.circle-container {
  animation-name: rotate;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}