龙空技术网

纯CSS实现的圆盘时钟

前端似锦 500

前言:

现时咱们对“时钟纯css”大概比较讲究,朋友们都需要学习一些“时钟纯css”的相关知识。那么小编同时在网摘上网罗了一些有关“时钟纯css””的相关文章,希望同学们能喜欢,你们快快来学习一下吧!

用css3实现圆盘时钟,总要的两个要点是css3动画(animation )属性与css3过渡(transform)属性。

例如:

animation: rotate_origin 86400s linear infinite;意思是执行一个名叫rotate_origin的动画,完成一个周期需要86400秒,动画执行是匀速的(linear),动画的播放次数是无限的。

transform: rotateZ(0deg);意思是沿着z轴旋转0度。

效果

CSS代码:

HTML代码:

标签: #时钟纯css