CSS3时光流逝效果

转载 2012年03月21日 09:07:45

前几天加上了一个小效果,我叫它为时光流逝效果,最初是在苹果官网看到的,是为了介绍全新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

/*积金千两,不如明解经书*/


css光影一闪而过 css 色泽效果

先看这个css效果。不知道什么时候,这样的css效果小小流行了一把。最早我是在京东看见的。今天在唯品会上面又看见了。 于是按捺不住,我自己也动手写了一个。保存到自己的css库里面,方便日后调用! 1...
  • u011456552
  • u011456552
  • 2016年12月08日 19:30
  • 1116

使用CSS3实现流星雨动画教程

很多营销页面中需要实现类似流星雨的动画背景,营造节日浪漫的气氛。要实现这样的效果,有两种方法,一个是使用Canvas,一个是使用纯CSS3,我们这里介绍第2种方法,在粒子数量少的时候,实现起来要更为简...
  • iefreer
  • iefreer
  • 2016年04月19日 20:16
  • 9561

CSS3发光字体几种效果

[CSS3] Neon Glow - CodePen /*setup*/ *{ margin: 0; padding: 0; } @font-face { font-fa...
  • huangyibin628
  • huangyibin628
  • 2015年06月20日 17:51
  • 7043

HTML5+CSS3+Jquery实现纯手工的垂直时光轴【附源码】

前言   由于工作中需要,系统中需要记录不同时间发生的事件,为了提升用户体验,决定用时光轴来实现。[据说这个东西挺火的,QQ空间和FB都在用...] 这个时光轴是在 三生石上 这位博主的时光轴基础...
  • a406502972
  • a406502972
  • 2015年12月01日 21:47
  • 1174

CSS3时光轴 -时间线 特效-来自 www.srcfans.com

这个效果大家估计比较熟悉吧,一个简单的时间线的功能,用CSS3实现时光轴,可用于记录企业大事记、重要事件的显示,复制本代码到你的网页上,然后修改大事件内容和时间就可以用了,在移动手机端兼容良好。 ...
  • shanshuiboy
  • shanshuiboy
  • 2017年05月13日 20:58
  • 307

css3动画效果

  • 2017年12月13日 13:52
  • 11.76MB
  • 下载

5款CSS3图标鼠标悬停效果

  • 2014年08月19日 17:34
  • 66KB
  • 下载

CSS3重构百度图片首页中图片展示效果

  • 2013年03月18日 16:17
  • 3KB
  • 下载

CSS3立体图片切换效果欣赏

  • 2013年03月16日 10:21
  • 346KB
  • 下载

CSS3打造百度贴吧的3D翻牌效果完整实例源码

  • 2014年07月12日 09:51
  • 185KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS3时光流逝效果
举报原因:
原因补充:

(最多只允许输入30个字)