HTML+CSS3制作简易的时钟转动模型

开发工具和关键技术：CSS3动画旋转
作者：坚定的守猴
撰写时间：2019年1月19日
CSS3新颖的功能有很多，能够实现一部分JS的功能，制作动画方便很多。下面就用CSS3简单的制作有趣的时钟转动模型。代码截图如下：
工欲善其事，必先利其器。要想实现功能，把基础的结构先写好

结构较简单，开头部分的代码不多。
接下来就直接到样式了。
Body背景动画的效果

想要什么图片效果可以手动修改图片

外层的框架样式

时针和分针的样式

时针和分针的动画函数

到这里可能就会有一个小疑惑，怎样区分时分针和写出动画效果呢？其实animation它包含3种属性,分别是动画名字、动画完成的时间和完成次数。设置动画完成秒数就可以调整转动的快慢。


这是时针转动的函数。（由于秒针转动函数和分针的一样，所以就不再重复上传截图）
一个简单时针转动就完成了。