Question

我找到了pacman动画的this代码，它有效，但我无法理解那里发生了什么。

因此，我尝试使用以下代码创建更容易的相同效果的动画：

function name2(){
  $('.pacman').addClass('left');
  function name(){
    $('.pacman').removeClass('left');
  }
  setTimeout(name,1000);
}
setInterval(name2,100);

它有效，但结果看起来很难看。如何以更简单的方式创建相同的动画？

Answer 1

我认为更简单的方法是使用css：

.pacman{
  position: absolute;
  top: 2px;
  left: 0;
  border-radius: 50%;
  border: 49px solid yellow;
  animation: pacman .5s ease-in-out infinite;|
}
@keyframes pacman {
  0% {
    border-left: 49px solid transparent;
  }
  50% {
    border-left: 49px solid yellow;
  }
  100% {
    border-left: 49px solid transparent;
  }
}

更容易为pacman创建动画的方法

1 个答案:

Demo