Question

我想在Css动画中创建一个简单的时钟，但显示实时，我尝试设置一个开始时间，然后旋转手。

但是有一个问题，当我尝试在60秒内旋转360度（在秒针的情况下）时，它计算60秒旋转360而不是朝向起点而是朝向0度的角度。所以我不确定应该采用什么方法。

我的css代码：

  .s-hand {
  height: 30px;
  -webkit-animation: rotor 60s linear infinite;
  -o-animation: rotor 60s linear infinite normal;
  animation: rotor 60s linear infinite normal;
}

  @-webkit-keyframes rotor {
   to {
    -webkit-transform: rotate(360deg);
  }
}

和js / ts：

var d = new Date();

var s = d.getSeconds() + Math.floor(d.getMilliseconds() / 1000);

let shand = document.getElementsByClassName('s-hand') as HTMLCollectionOf<HTMLElement>;

    if (shand.length != 0) {
      shand[0].style.transform = "rotate(" + s * 6 + "deg)";
    }

所以：

正确设置起始位置
动画正在正常运行
只有手完全旋转的时间不正确

Codesnippet： https://codepen.io/anon/pen/bvEPWv

正如你所看到的那样，手移动得太慢了，因为它向0度计算60秒，而不是朝向起点（以js设置）

在js中设置起始位置的Css动画时钟？

0 个答案: