JS+HTML makes clock animation

This time I will bring you JS HTML to make a clock animation. What are theprecautions for making a clock animation with JS HTML? The following is a practical case, let’s take a look.

The knowledge points involved are:

CSS3 animation, DOM operation, timer, calculation of dot coordinates (many people have already returned it to their teachers~)Next, we use 5 Steps to make it

step1、Prepare HTML

First, we need to prepare the HTML structure, background, dial, hands (hour hand, minute hand, second hand), and numbers.

 
 
 
 
 
 
 
 
 < /p>

step2、Prepare CSS

Define the color and size of the pointer. What needs to be explained is that transform: rotate(-90deg); is used to rotate the pointer, and transform-origin:0 6px; is used to set the rotation center point.