CSS3时光流逝效果

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

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

CSS3时光流逝效果相关推荐

boostrap 鼠标滚轮滑动图片_16种基于Bootstrap的css3图片hover效果
bootstrap-image-hover是一款基于Bootstrap的css3图片hover效果.这组图片hover效果共16种特效.同时该特效也支持非Bootstrap版本. 使用方法在页面中引 ...
[css] 请说说CSS3实现文本效果的属性有哪些？
[css] 请说说CSS3实现文本效果的属性有哪些? text-shadow:文字阴影效果 word-wrap:换行设置个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷 ...
推荐12个绚丽的CSS3图片悬停效果
CSS3为我们开发提供了很多特效,如鼠标悬停,线性渐变,在web开发早期常用的是鼠标悬停,他是网页制作的常用特效之一,早期使用Flash可以制作非常炫的效果,后来慢慢演变成现在的是图片悬停效果,现在我 ...
CSS3图片跳动效果
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>CSS ...
css3 页面翻转效果.
css3 页面翻转效果. 从事手机前端开发也有段时间了,最近重习了css3,html5...做了些小例子. 演示示例在这里源码如下: 1: <html> 2: <head> ...
html怎么做成3d正方体,利用CSS3的3D效果制作正方体
学会用CSS3的3D效果制作一个正方体,有助于增强我们对3D场景的旋转和位移属性的理解.下面的动态图就是利用3D旋转位移,结合动画效果制作的.感兴趣的同学可以在完成正方体的制作基础上,再去探究一下添加 ...
html鼠标元素效果,十五种css3鼠标hover效果
css3有哪些不错的hover效果 CSS3在hover下的几种效果代码分享,CSS3在鼠标经过时的几种效果集锦效果一:360°旋转修改rotate(旋转度数) 01 * { 02 transit ...
怎么在html中加入特效文字,如何使用HTML5+css3实现粒子效果文字动画特效（附完整代码）...
我们在浏览web网页的时候会发现现在的网页做的越来越美观,很多动画特效做的越来越炫酷,这离不开HTML5和css3的深入开发.今天我们要来分享一款基于HTML5和css3的文字特效--粒子效果文字动画 ...
html翻牌动画效果,js+css3翻牌动画效果
这是一款js+css3翻牌动画效果,界面设计感不错的,喜欢可以下载哦温馨提示不兼容IE6,7,8浏览器. 查看演示下载资源: 16 次下载资源下载积分: 20 积分 function () { ...
Unity时光倒流效果实现
Unity时光倒流效果实现<25/11/2017> 场景:一个Panel,一个由众多小Cube堆叠而成的巨大Cube,巨大Cube中心放置爆炸点Bomb. 实现方式:一共就三个脚本,每个C ...

CSS3时光流逝效果

CSS3时光流逝效果相关推荐

最新文章

热门文章