jquery - 如何创建滴答声的逐帧动画外观

Question

我有一张照片。如何创建滴答声的逐帧动画外观？

我该怎么做？

Answer 1

您可以使用 CSS 动画以不同的步骤移动或替换背景图像。

但是，我不会逐帧执行此示例。最好将刻度线放在单独的图像中并通过设置宽度动画来“揭开面纱”。使用 CSS 动画或过渡，视情况而定。

这是一个使用您的图像的示例，没有单独的图像作为刻度线。不幸的是，您的图像没有空状态的圆圈。

.foo1, .foo2 {
  width: 100px;
  height: 100px;
  transition: .5s all ease;
  background-image: url('http://i.stack.imgur.com/gzzRl.png');
  position: absolute;
}

.container {
  position: relative;
}

.foo2 {
  background-position: -202px 0;
  width: 0;
}

.container:hover .foo2 {
  width: 100px;
}

<div class="container">
  <div class="foo1">
  </div>
  <div class="foo2">
  </div>
</div>