文章分类 Classification
纯css3时钟动画
稿件来源: 阳光企业网站管理系统 撰稿作者: 太阳光 发表日期: 2012-03-29 阅读次数: 402 查看权限: 游客查看
js+html5制作时钟已经实现了,如果纯CSS3时钟动画呢。下面我们来看一下。
制作纯CSS3时钟动画原理:
在css中存在几种常用的伪类选择 :link
未访问的链接
:visited
访问过的链接
:hover
鼠标经过元素
:active
鼠标点击元素
:focus
元素被选中。在CSS3里添加了几种伪类选择,其中一种是:target 匹配文档(页面)的URI中某个标志符的目标元素(类似锚的作用)。
#clock:target{ -webkit-transform: rotate(300deg); }
当网页地址为 xxx.html#clock 时就会触发上面的CSS。由此我们写下以下代码:<!DOCTYPE html>
<html> <head> <meta charset=utf-8> <title>纯css3时钟</title> <style type="text/css"> body{ font-size:12px; margin:0; text-align:center; } #clock { background: url("images/clockface.png") no-repeat 0 0; height: 256px; width: 256px; list-style: none; margin: 0 auto; position: relative; } #clock div { position: absolute; } .simg { -webkit-transition: -webkit-transform 86400s linear; -moz-transition: -moz-transform 86400s linear; -o-transition: -o-transform 86400s linear; -ms-transition: -ms-transform 86400s linear; transition: transform 86400s linear; } .mimg { -webkit-transition: -webkit-transform 86400s linear; -moz-transition: -moz-transform 86400s linear; -o-transition: -o-transform 86400s linear; -ms-transition: -ms-transform 86400s linear; transition: transform 86400s linear; } .himg { -webkit-transition: -webkit-transform 86400s linear; -moz-transition: -moz-transform 86400s linear; -o-transition: -o-transform 86400s linear; -ms-transition: -ms-transform 86400s linear; transition: transform 86400s linear; } #clock:target .simg { -webkit-transform: rotate(518400deg); -moz-transform: rotate(518400deg); -o-transform: rotate(518400deg); -ms-transform: rotate(518400deg); -transform: rotate(518400deg); } #clock:target .mimg { -webkit-transform: rotate(8640deg); -moz-transform: rotate(8640deg); -o-transform: rotate(8640deg); -ms-transform: rotate(8640deg); transform: rotate(8640deg); } #clock:target .himg{ -webkit-transform: rotate(720deg); -moz-transform: rotate(720deg); -o-transform: rotate(720deg); -ms-transform: rotate(720deg); transform: rotate(720deg); } </style> </head> <body> <div id="clock"> <div id="second"><img class="simg" src="images/sechand.png" /></div> <div id="hour"><img class="himg" src="images/hourhand.png" /></div> <div id="minute"><img class="mimg" src="images/minhand.png" /></div> </div> <script type="text/javascript"> (function(){ if(window.location.hash != "#clock"){ window.location.href="index3.html#clock"; //实现动画主要是靠CSS3的伪类:target //为了不做触发锚的连接,我让网页自动重新加载以触发:target,可惜Firefox对此支持并不友好,所以请使用Chrome或Safari浏览以达到理想效果。 } //查出本浏览器支持的CSS属性,以免加载多余的CSS var props = 'transform WebkitTransform MozTransform OTransform msTransform'.split(' '), prop,el = document.createElement('div'); for(var i = 0, l = props.length; i < l; i++) { if(typeof el.style[props[i]] !== "undefined") { prop = props[i]+""; break; } } //在没有运行js前,虽然指针是会自动旋转了,但时间却是从00:00:00开始的,无法与系统时间对应。我想您也不希望看到这种结果,所以先校对一下时间,后面就全靠css动画自动旋转。 var date = new Date(); var h=date.getHours(); h=h>12?h-12:h; var m = date.getMinutes(); var s = date.getSeconds(); var hr = (360/12) * h + (360/(12*60)) * m; document.getElementById('minute').style[prop] = 'rotate('+6 * m+'deg)'; document.getElementById('second').style[prop] = 'rotate('+6 * s+'deg)'; document.getElementById('hour').style[prop] = 'rotate('+hr+'deg)'; })(); </script> </body> </html>
查看效果:狠狠点击这里 (请使用Chrome或Safari浏览)
关键词: html5,css动画 编辑时间: 2013-10-08 17:17:36
1
高兴0
支持0
搞笑0
不解0
谎言0
枪稿0
震惊0
无奈0
无聊0
反对0
愤怒
75%(3)
25%(1)
- 暂无评论
文章图片 article Pictrue
网友评论