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动画旋转动画时，动画会覆盖翻译。

你也可以通过将translate转换为animate的变换来解决这个问题：

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

垂直对齐和动画

1 个答案: