css光盘转动,纯CSS光盘动画

下面是一个使用纯CSS实现的光盘转动动画的示例代码：

HTML代码：

<div class="cd-container">
  <div class="cd">
    <div class="cd-inner"></div>
  </div>
</div>

CSS代码：

.cd-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f5f5f5;
}

.cd {
  position: relative;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background-color: #333;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2);
  animation: rotate 3s linear infinite;
}

.cd-inner {
  position: absolute;
  top: 25%;
  left: 25%;
  width: 50%;
  height: 50%;
  border-radius: 50%;
  background-image: radial-gradient(circle at 50% 50%, #ff2e2e 0%, #ff6a6a 15%, #ff2e2e 30%);
  transform: rotate(45deg);
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

在上面的代码中，我们首先创建了一个包含CD的容器元素，并使用flex布局将其居中显示。然后，我们创建了一个圆形的CD元素，并使用border-radius属性将其变成一个圆形。我们还为CD元素添加了一个内阴影效果，以增强视觉效果。

接下来，我们在CD元素内部创建了一个圆形的内部元素，并使用radial-gradient属性为其添加了一个渐变的红色背景。我们还使用transform属性将其旋转了45度，以使其与CD元素的边缘对齐。

最后，我们使用CSS动画将CD元素无限循环地旋转360度，从而实现了光盘转动的效果。

你可以在浏览器中查看这个示例，以更好地理解它的工作原理。