前端练习--钟表运动效果

目录

一、效果展示

二、原理

1、背景

2、指针旋转

三、代码（背景图来自本地，请自行下载）

---

一、效果展示

二、原理

1、背景

（1）实际上，钟表一个div，时针分针秒针都有一个div背景，只是没有显示

（2）用一个div作为钟表的盒子，加入背景图片，并用border-radius设置为圆形

（3）每个指针需要一个div作为背景

（4）将时针分针秒针作为div的子元素，让他们在盒子中居中，并且长度只占50%

2、指针旋转

（1）实际上指针没有添加动画效果进行旋转，因为如果对指针进行旋转，则是以指针中心点为圆心进行旋转

（2）旋转体实际上是指针的背景，因为div旋转，中心点在正放心盒子中心，而指针只占大小的一半，则会有上面的效果，我说的就是下面这样

 （3）用keyframes加上旋转效果就可以了，只要把每个指针的div设置与现实相同的时间运动就可以了

三、代码（背景图来自本地，请自行下载）