css3实现扁平化风格APP应用图标时钟动画
2015-03-27 17:10
519 查看
今天无聊写了一个扁平化风格APP时钟动态图标。其外观(表盘、刻度、指针)都使用css来绘制,然后再通过javascript来获取当前时间并且让时钟动起来。有了这个优美的动态时钟,我再也不要看手表了,哈哈。
查看演示:http://www.datouwang.com/jiaoben/405.html
好了,今天的分享就到这里,如果你们也有不错的、好玩的东西也可以跟我一起分享哦。
一、HTML结构代码
结构比较简单:表盘(icon-clock)、内圆(clock)、刻度(ol)以及时针(hour)、分针(min)、秒针(sec)。具体如下:<div class="icon-large icon-clock"> <div class="clock"> <ol> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ol> <div id="hour"></div> <div id="min"></div> <div id="sec"></div> </div> </div>
二、CSS绘制时钟样式
通过css3的变换以及旋转等属性来绘制出漂亮的扁平化时钟。html, body { height: 100%; background: #ffd740; position: relative; } .icon-large { width: 220px; height: 220px; border-radius: 38px; margin:auto auto 60px auto; position: relative; } .icon-clock { overflow: hidden; background: #000; } .clock { width: 192px; height: 192px; border-radius: 50%; background: #f1f1f1; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .clock ol { list-style-type: none; width: 100%; height: 100%; position: relative; margin: 0; padding: 0; } .clock ol li { counter-increment: labelCounter; position: absolute; font-size: 1.25em; } .clock ol li:before { font-family: 'Helvetica'; content: counter(labelCounter) ""; } .clock ol li:nth-child(1) { right: 55px; top: 20px; } .clock ol li:nth-child(2) { right: 25px; top: 50px; } .clock ol li:nth-child(3) { right: 12px; top: 85px; } .clock ol li:nth-child(4) { right: 25px; top: 125px; } .clock ol li:nth-child(5) { right: 55px; top: 150px; } .clock ol li:nth-child(6) { right: 90px; top: 160px; } .clock ol li:nth-child(7) { right: 125px; top: 150px; } .clock ol li:nth-child(8) { right: 155px; top: 125px; } .clock ol li:nth-child(9) { right: 165px; top: 85px; } .clock ol li:nth-child(10) { right: 150px; top: 50px; } .clock ol li:nth-child(11) { right: 120px; top: 20px; } .clock ol li:nth-child(12) { right: 85px; top: 10px; } @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } #hour { width: 14px; height: 14px; border-radius: 50%; background: #303030; position: absolute; top: 50%; left: 50%; margin-top: -7px; margin-left: -7px; } #hour:before, #hour:after { content: ""; display: block; position: absolute; } #hour:before { width: 8px; height: 65px; border-radius: 4px; background: #303030; position: absolute; bottom: 2px; left: 50%; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); } #min { width: 0; height: 0; border-radius: 50%; background: #303030; position: absolute; top: 50%; left: 50%; } #min:before, #min:after { content: ""; display: block; position: absolute; } #min:before { width: 6px; height: 90px; border-radius: 4px; background: #303030; position: absolute; bottom: 2px; left: 50%; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); } #sec { width: 4px; height: 4px; border-radius: 50%; background: #dd3e1c; border: 2px solid #e13e1b; position: absolute; top: 50%; left: 50%; margin-top: -4px; margin-left: -4px; } #sec:before, #sec:after { content: ""; display: block; position: absolute; } #sec:before { width: 2px; height: 105px; border-radius: 4px; background: #e13e1b; position: absolute; bottom: -12px; left: 50%; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); }
三、JavaScript让时钟动起来
到这里基本完成了时钟效果,最后我们通过javascript来获取当前时间,然后让时钟动起来。参考代码如下://use requestAnimationFrame for smoothness (shimmed with setTimeout fallback) window.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function( callback ){ window.setTimeout(callback, 1000 / 60); }; })(); //initialize the clock in a self-invoking function (function clock(){ var hour = document.getElementById("hour"), min = document.getElementById("min"), sec = document.getElementById("sec"); //set up a loop (function loop(){ requestAnimFrame(loop); draw(); })(); //position the hands function draw(){ var now = new Date(),//now then = new Date(now.getFullYear(),now.getMonth(),now.getDate(),0,0,0),//midnight diffInMil = (now.getTime() - then.getTime()),// difference in milliseconds h = (diffInMil/(1000*60*60)),//hours m = (h*60),//minutes s = (m*60);//seconds //rotate the hands accordingly sec.style.webkitTransform = "rotate(" + (s * 6) + "deg)"; hour.style.webkitTransform = "rotate(" + (h * 30 + (h / 2)) + "deg)"; min.style.webkitTransform = "rotate(" + (m * 6) + "deg)"; } })();
查看演示:http://www.datouwang.com/jiaoben/405.html
好了,今天的分享就到这里,如果你们也有不错的、好玩的东西也可以跟我一起分享哦。
相关文章推荐
- 应用 CSS3 动画实现12种风格的通知提示
- Html+CSS3技术实现动画、天气图标动态效果 效果很酷
- (一)CSS3动画应用 - CSS3 实现 侧边栏展开收起
- Android APP安装后不在桌面显示图标的应用场景举例和实现方法
- css3 动画应用 animations 和transtions transform在加上JavaScript 可以实现硬件加速动画。
- Android APP安装后不在桌面显示图标的应用场景举例和实现方法
- Android APP安装后不在桌面显示图标的应用场景举例和实现方法
- css3动画实现 loading图标 很实用
- 7款纯CSS3实现的炫酷动画应用|慕课网只学有用的!
- Android APP安装后不在桌面显示图标的应用场景举例和实现方法
- css3实现时钟动画
- Android APP安装后不在桌面显示图标的应用场景举例和实现方法
- 7款纯CSS3实现的炫酷动画应用
- Android APP安装后不在桌面显示图标的应用场景举例和实现方法
- Android APP安装后不在桌面显示图标的应用场景举例和实现方法
- CSS3动画实现loading加载图标
- Android App更改应用的图标的实现方法
- Android APP安装后不在桌面显示图标的应用场景举例和实现方法
- Android APP安装后不在桌面显示图标的应用场景举例和实现方法
- Android APP安装后不在桌面显示图标的应用场景举例和实现方法