纯css3制作小时钟带摇摆

css3的神奇之处在于可以完成之前只能通过js来进行的操作,记得这个小时钟是在17年年初的时候的做的,讲了几个班级,看学生的接受能力并不是特别好,今天特此在讲解一下。

在讲解之前主要说明一下 秒针转一圈分针动一下,那么秒针一圈需要走60s那么分针走一圈需要60*60=3600s时针动一下分针转一圈那么久可以得到时针的时间为3600*12=42300s.

明白了这个原理,那么加上css3的动画属性,那么就可以讲一个小小的始终做出来了。

这就是基本的小时钟的效果,做的不是特别复杂很简单。接下来我们来说一下具体的html结构以及css样式如何编写

结构弄完了接下来我们来弄钟表的样式:

接下来开始做数字:这里我用的是位移,用定位也是一样的。

底部摆钟的样式:

摇摆的样式:

动画样式

致此就完事了,希望大家动手去敲敲知道里面的含义。

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180206G05BZ200?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券