[分享]css中怎么做转动的音乐唱片

最近在学习CSS的过程中，发现有一种非常神奇的效果——将音乐唱片转动起来！下面我们就来看看怎么实现这个效果。.musicdisk { width: 300px; height: 300px; back...

最近在学习CSS的过程中，发现有一种非常神奇的效果——将音乐唱片转动起来！下面我们就来看看怎么实现这个效果。

.music-disk {
  width: 300px;
  height: 300px;
  background-image: url("disk.png");
  background-size: 100%;
  position: relative;
  animation: rotateDisc 2s linear infinite;
  transform-origin: center;
}

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

首先，我们需要一个音乐唱片的图片，它将作为背景图使用。在CSS中，我们可以通过background-image来设置背景图，并通过background-size来让图片适应容器。容器本身需要设置width和height来定义大小。

接下来我们需要让这个唱片转起来。这里我们用到了CSS中的animation属性，通过指定rotateDisc作为动画名称，2s表示动画时长，linear表示动画速度为线性（也可以使用其他的），infinite表示循环播放，即唱片会不停地转动。

对于transform-origin，它作为CSS中的一个属性，它能帮助我们定义旋转的中心点。这里我们将它设为center，表示旋转中心在容器的正中央。

最后，我们需要定义动画的关键帧。我们让唱片从0deg开始旋转，到360deg停止。这里我们指定了from和to表示起始和结束状态，也可以一次性写成0% -> 100%的形式。

在HTML中，我们只需要在相应容器中加上music-disk的class即可生效。

到这里，我们就能看到一个很棒的效果——一个美妙旋转的音乐唱片！不过，上面的代码仅仅是一个基础的版本。如果想要更好的效果或者更多的变化，可以自行尝试调整属性或者添加其他的效果哦。