CSS3+HTML5特效9 - 简单的时钟
2014-06-04 23:17
309 查看
原文:CSS3+HTML5特效9 - 简单的时钟效果演示(加快了100倍)
实现原理
利用CSS3的transform-origin 及 transform 完成以上效果。
代码及说明
第2-22行,定义了旋转的中性点及旋转的角度;
第23-33行,定义了时针的效果,同时定义了43200秒旋转一周,即12小时旋转360度;
第34-44行,定义了分针的效果,同时定义了3600秒旋转一周,即1小时旋转360度;
第45-55行,定义了秒针的效果,同时定义了60秒旋转一周,即1分钟旋转360度;
第57-65行,定义了表盘;
第68-71行,显示时针、分针、秒针及表盘。
至此完成了一个简单的时钟,如果要与当前计算机时间一致,只需要使用JS调整时针、分针、秒针的初始角度就可以了。
实现原理
利用CSS3的transform-origin 及 transform 完成以上效果。
代码及说明
<style> @-webkit-keyframes rotateLabel { 0%{ -webkit-transform-origin:0% 100%; -webkit-transform: rotate(0deg); } 100%{ -webkit-transform-origin:0% 100%; -webkit-transform: rotate(360deg); } } @keyframes rotateLabel { 0%{ transform-origin:0% 100%; transform: rotate(0deg); } 100%{ transform-origin:0% 100%; transform: rotate(360deg); } } .hour { position: absolute; top: 60px; left: 200px; width: 1px; height: 50px; background-color: #000; -webkit-animation:rotateLabel 43200s infinite linear ; animation:rotateLabel 43200s infinite linear ; } .minute { position: absolute; top: 40px; left: 200px; width: 1px; height: 70px; background-color: #0000ff; -webkit-animation:rotateLabel 3600s infinite linear ; animation:rotateLabel 3600s infinite linear ; } .second { position: absolute; top: 10px; left: 200px; width: 1px; height: 100px; background-color: #ff0000; -webkit-animation:rotateLabel 60s infinite linear ; animation:rotateLabel 60s infinite linear ; } .border{ position: absolute; top: 5px; left: 95px; width: 210px; height: 210px; border-radius: 105px; border: 1px solid #e0e0e0; } </style> <div class="hour"></div> <div class="minute"></div> <div class="second"></div> <div class="border"></div>
第2-22行,定义了旋转的中性点及旋转的角度;
第23-33行,定义了时针的效果,同时定义了43200秒旋转一周,即12小时旋转360度;
第34-44行,定义了分针的效果,同时定义了3600秒旋转一周,即1小时旋转360度;
第45-55行,定义了秒针的效果,同时定义了60秒旋转一周,即1分钟旋转360度;
第57-65行,定义了表盘;
第68-71行,显示时针、分针、秒针及表盘。
至此完成了一个简单的时钟,如果要与当前计算机时间一致,只需要使用JS调整时针、分针、秒针的初始角度就可以了。
相关文章推荐
- CSS3+HTML5特效9 - 简单的时钟
- 8 款简单大气的 jQuery/CSS3 图片特效
- 分享8款简单大气的jQuery/CSS3图片特效
- CSS3+HTML5特效6 - 闪烁的文字
- CSS3+HTML5特效7 - 特殊的 Loading 效果
- 使用HTML5中的Canves标签制作时钟特效
- html5 css3 新元素简单页面布局
- HTML5----CSS3图片滤镜(filter)特效
- CSS3+HTML5特效4 - 横向无缝滚动
- CSS3+HTML5特效3 - 纵向无缝滚动
- CSS3 草稿练习,一些简单特效。
- 超喜欢的一个HTML5 + CSS3 特效网站
- 使用HTML5/CSS3快速制作便签贴特效
- CSS3+HTML5特效5 - 震动的文字
- css3元素简单的闪烁效果(html5 jquery)
- 分享8款简单大气的jQuery/CSS3图片特效
- 推荐8款简单大气的JQuery/CSS3图片特效焦点图
- 简单的javascript实例一(时钟特效)
- HTML5资源教程9款赏心悦目的HTML5/CSS3应用特效
- CSS3+HTML5特效8 - 顶部和右侧固定,左侧随窗口变化的布局