0

0

JS+HTML做出时钟动画

php中世界最好的语言

php中世界最好的语言

发布时间:2018-04-14 15:25:19

|

2516人浏览过

|

来源于php中文网

原创

这次给大家带来JS+HTML做出时钟动画,JS+HTML做出时钟动画的注意事项有哪些,下面就是实战案例,一起来看一下。

涉及到的知识点有: CSS3动画、DOM操作、定时器、圆点坐标的计算(好多人是不是已经还给自己的老师了~)
 接下来,我们用5步来制作它

step1、准备HTML

首先,我们需要准备HTML结构,背景、表盘、指针(时针、分针、秒针)、数字。

< /p>

step2、准备CSS

定义好指针的颜色和大小,需要说明的是transform: rotate(-90deg); 用来旋转指针,transform-origin:0 6px; 用来设置旋转中心点。