CSS3时光流逝效果
2012-03-21 09:07
260 查看
前几天加上了一个小效果,我叫它为时光流逝效果,最初是在苹果官网看到的,是为了介绍全新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);
下面Demo时间到了。
Demo
/*积金千两,不如明解经书*/
效果是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);
下面Demo时间到了。
Demo
/*积金千两,不如明解经书*/
相关文章推荐
- CSS3中的动画效果
- 15 个用 CSS3 实现的文本效果
- 华丽的css3效果演示集合
- css3的转换效果过渡效果动画效果和列
- CSS3新标准选择器 框模型 背景和边框 文本效果 2D/3D 转换 动画 多列布局 用户界面
- 纯CSS3画出小黄人并实现动画效果
- 一个用 CSS3 样式加上 JS 实现了 alert 和 confirm的效果
- 时光的流逝
- css3 loading动画之打字效果
- CSS3实现鼠标移动到图片上图片变大(缓慢变大,有过渡效果,放大的过程是有动画过渡的,这个过渡的时间可以自定义)
- css3翻牌效果
- 任时光流逝
- 超棒的CSS3动画页面过渡效果
- 用css3实现简单的进入效果
- [CSS3学习]用CSS3做一个圆圈等待条动画效果
- css3 animation 动画应用2 —— 打字效果
- css3实现闪光效果
- 使用 jQuery & CSS3 实现优雅的手风琴效果
- 纯CSS3实现滚动的齿轮动画效果
- html+css3太阳系行星运转动画效果的实现代码