时光流逝效果-优快云博客

前几天加上了一个小效果，我叫它为时光流逝效果，最初是在苹果官网看到的，是为了介绍全新ipad可以续航10小时的一个小效果，于是我用我自己的方式把相同的效果写了一下，不是canvas，仅仅是css3而已，因为我看着还可以，于是就挂到博客上了，用来提醒自己一天的时光就这样流逝了,刚好又有童鞋问我这效果是如何实现，并希望我写一篇文章来说明一下，于是就有了这篇文章。

效果是webkit only。

素材是使用的苹果官网的svg图片，本来我想找几个好看的指针和表盘，可是很多都是主题的色调不匹配，懒得找了，就用它吧。

具体效果可以使用webkit浏览器在站点顶部右侧查看.

相关代码如下,里面所使用的方法在webkit下有效。

 
 var date = 
 new Date(); 
 
 
 var hour =  
 30*date.getHours() + date.getMinutes()* 
 0.5; 
 
 
 var minute =  
 360 * date.getHours() + date.getMinutes()* 
 6 ; 
 
 
 var clockStyle =  
 ‘img.hour{-webkit-animation-name:hour;-webkit-animation-duration:7s;-webkit-animation-iteration-count:1;-webkit-animation-timing-function: ease-in-out;}img.minute{-webkit-animation-name:minute;-webkit-animation-duration:7s;-webkit-animation-iteration-count:1;-webkit-animation-timing-function: ease-in-out;}@-webkit-keyframes hour{0%{-webkit-transform:rotate(0deg);}100%{-webkit-transform:rotate(‘ + hour+ 
 ‘deg);}}@-webkit-keyframes minute{0%{-webkit-transform:rotate(0deg);}100%{-webkit-transform:rotate(‘ + minute + 
 ‘deg);}}img.hour{-webkit-transform:rotate(‘ + hour+ 
 ‘deg);}img.minute{-webkit-transform:rotate(‘ + minute + 
 ‘deg);}’; 
 
 
 var style =  
 document.createElement( 
 “style”); 
 
 style.innerHTML = clockStyle;  
 // 
 
 
 document.getElementsByTagName( 
 “head”)[ 
 0].appendChild(style); 