纯js和css在线时钟

1. 效果图

2. html代码

3. 原理和解释

• 效果图

• html代码

• 源码及解释

关键帧keyframes

 @keyframes run{
    from{
        transform: rotateZ(0deg);
    }
    to{
        transform: rotateZ(360deg);
    }
}
这段代码是关键帧的代码，也就是说动画从Z轴为基准的角度从0旋转到360，回到起点

动画animation

 .second{
    width: 55%;
    height: 55%;
    animation: run 60s steps(60) infinite;
}
animation的参数run是关键帧（keyframes）的方法，参数60s是说走完360度（1圈）需要用时60s（1分钟），即秒针走完一圈是60s（一分钟），参数steps是步数，即60步，一步一秒。infinite好像是让动画更真实

 transform-origin:bottom;
这里的动画基准点是bottom，也就是底部。从左往右，左是底。右是上。我画的线条是右边围绕左边的原点转。所以参数是底部

js代码

这里的hourNode到millisecNode是针的节点，sec到milli是当前时间秒到毫秒，transform是当前改变值，rotateZ让指针旋转里面的角度值。一圈360度，12小时，每一小时是30度，所以时针应该转到hour*30角度，其他同理推得

如果想让时钟跑起来，需要的view.jpg换成自己的时钟背景图