古典的HTML5钟表效果

2020-01-27 14:16:57

字体：大中小

来源：转载

供稿：网友

古典的HTML5钟表效果，请在火狐下运行，IE8不支持本效果，经过测试，本时钟确实漂亮古朴，挺有艺术感的，希望您也会喜欢。

<!DOCTYPE><html lang="en" id="paulrhayes-com" class="js wf-swingdancer1swingdancer2-n5-active wf-active"><head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>HTML5钟表</title>     <style type="text/css">body.experiment {background: #fff;}.start {text-align: center;font-size: 2em;font-weight: bold;margin: 5em;}#clock {position: relative;width: 378px;height: 378px;background-image: url('/jscss/demoimg/201208/2012031316573623.png');left: 50%;margin: 5em 0 0 -189px;}#clock div {position: absolute;}#clock img[src*='second'] {-webkit-transition: -webkit-transform 600000s linear;-moz-transition: -moz-transform 600000s linear;-o-transition: -o-transform 600000s linear;-ms-transition: -ms-transform 600000s linear;transition: transform 600000s linear;}#clock:target img[src*='second'] {-webkit-transform: rotate(3600000deg);-moz-transform: rotate(3600000deg);-o-transform: rotate(3600000deg);-ms-transform: rotate(3600000deg);-transform: rotate(3600000deg);}#clock img[src*='minute'] {-webkit-transition: -webkit-transform 360000s linear;-moz-transition: -moz-transform 360000s linear;-o-transition: -o-transform 360000s linear;-ms-transition: -ms-transform 360000s linear;transition: transform 360000s linear;}#clock:target img[src*='minute'] {-webkit-transform: rotate(36000deg);-moz-transform: rotate(36000deg);-o-transform: rotate(36000deg);-ms-transform: rotate(36000deg);transform: rotate(36000deg);}#clock img[src*='hour'] {-webkit-transition: -webkit-transform 216000s linear;-moz-transition: -moz-transform 216000s linear;-o-transition: -o-transform 216000s linear;-ms-transition: -ms-transform 216000s linear;transition: transform 216000s linear;}#clock:target img[src*='hour'] {-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);-o-transform: rotate(360deg);-ms-transform: rotate(360deg);transform: rotate(360deg);}</style></head><body class="experiment"><div id="wrapper">    <header id="header">        <aside class="tweetThis">            <a href="#" class="twitter-share-button" data-text="CSS3 Analogue Clock" data-count="horizontal" data-via="fofr">滴水成兵</a>        </aside>    </header><div id="experiment">    <div id="clock">        <div id="hour"><img src="/d/file/p/2020/01-27/6862520cb23f83620e527f0c338aae08.png" alt=""></div>        <div id="minute"><img src="/d/file/p/2020/01-27/f2a141be0fd7dafeefc993ccf4ac9d76.png" alt=""></div>        <div id="second"><img src="/d/file/p/2020/01-27/1a070103a4ba91883e4b31cef60bea97.png" alt=""></div>    </div></div></div><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script type="text/javascript">$(function(){    var props = 'transform WebkitTransform MozTransform OTransform msTransform'.split(' '),        prop,        el = document.createElement('div');    for(var i = 0, l = props.length; i < l; i++) {        if(typeof el.style[props[i]] !== "undefined") {            prop = props[i];            break;        }    }    startClock();    setInterval(function(){startClock();},1000)    function startClock() {        var angle = 360/60,            date = new Date(),            hour = (function() {                var h = date.getHours();                if(h > 12) {                    h = h - 12;                }                return h            })(),            minute = date.getMinutes(),            second = date.getSeconds(),            hourAngle = (360/12) * hour + (360/(12*60)) * minute;                if(prop) {            $('#minute')[0].style[prop] = 'rotate('+angle * minute+'deg)';            $('#second')[0].style[prop] = 'rotate('+angle * second+'deg)';            $('#hour')[0].style[prop] = 'rotate('+hourAngle+'deg)';        }    }    document.title = date});</script></body></html>

上一篇：css3进度条

下一篇：不用图片和文字的CSS3文字效果