html - 垂直对齐和动画

Question

我正在制作一个音乐库，但我遇到了垂直对齐和动画方面的问题。

我有这个 html 代码:

<div id="player">
   <div class="player-disc"></div>
</div>

和它的 CSS:

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

#player {
  position:relative;
  margin: 30px auto;
  height: 300px;
  width: 700px;
  background-color: #E25822;
  -moz-border-radius: 200px;
  -webkit-border-radius: 200px;
  border-radius: 200px;
 }

#player .player-disc {
  position: absolute;
  top: 50%;
  left:25px;
  transform: translateY(-50%);
  /* animation: spin 5s infinite linear; */
  width: 250px;
  height: 250px;
  background: black url("https://i.ytimg.com/vi/SFfrthBpqQA/maxresdefault.jpg") no-repeat;
  background-size: 250px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}

当我注释掉动画时(正如您在上面看到的那样)，页面看起来还不错，但是当我添加动画线时，“圆盘”掉落并开始旋转，我可以'我似乎不知道我做错了什么。

这是 jsFiddle

Answer 1

因为你的光盘上有这个，所以可以在播放器中移动它:

transform: translateY(-50%);

当您通过 transform 设置旋转动画时，动画会覆盖平移。

您也可以通过将翻译添加到动画的转换中来解决此问题:

@keyframes spin {
  0% { 
    transform: translateY(-50%) rotate(0deg);
  }
  100% {
    transform: translateY(-50%) rotate(360deg);
  }
}