css动画控制唱片旋转

在网页中，动画效果可以使页面的视觉效果更加生动、有趣，而 CSS 动画可以帮助我们实现页面元素的动态效果。本文将介绍如何使用 CSS 动画控制唱片旋转。@H_502_1@

.disc {
  width: 200px;
  height: 200px;
  background-color: #fff;
  border-radius: 50%;
  position: relative;
}

.disc:before {
  content:'';
  display: block;
  width: 50px;
  height: 50px;
  background-color:#000;
  border-radius: 50%;
  position: absolute;
  top: 75px;
  left: 75px;
  z-index: 1;
}
.disc:after {
  content: '';
  display: block;
  width: 150px;
  height: 150px;
  background-color: #efefef;
  border-radius: 50%;
  position: absolute;
  top: 25px;
  left: 25px;
}

.disc.playing:before {
  animation: rotate 2s linear infinite;
}

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

@H_502_1@@H_502_1@

以上是控制唱片旋转的主要代码。首先我们为唱片元素添加了相应的样式，并设置了一个光标在唱片中心的小黑圆点。接下来，我们定义了一个伪元素表示唱片的边框，然后为其添加了旋转动画。当我们在 HTML 中添加 playing 类名时，动画才会生效。最后，我们定义了旋转的动画效果，从 0 度开始旋转，到 360 度结束。@H_502_1@

在页面中添加以下 HTML 代码，即可实现控制唱片旋转的效果。@H_502_1@

<div class="disc"></div>

<button onclick="document.querySelector('.disc').classList.toggle('playing')">Play/Pause</button>

通过给唱片元素添加 playing 类名，我们可以让它开始旋转。而点击按钮可以控制播放/暂停。在实现网站动画效果时，我们可以利用 CSS 动画来实现各种有趣的效果。@H_502_1@