炫酷时钟（css3+js）

来源：互联网发布：owncloud php fpm 编辑：程序博客网时间：2024/05/21 18:35

html

<body>        <ul id='box'></ul></body>

css

<style>            *{                margin: 0;                padding: 0;            }            body{                background-color: #aaa;            }            ul{                width: 400px;                height: 400px;                border: 5px solid skyblue;                margin: 100px auto 0 auto;                border-radius: 50%;                 background: radial-gradient(green 50%, yellow 100%);;                position: relative;            }            ul li{                width: 2px;                height: 15px;                list-style: none;                background-color: #fff;                position: absolute;                left: 199px;                transform-origin: center 200px;            }            h1{                width: 2px;                height: 180px;                background-color: orange;                position: absolute;                left: 199px;                top:20px;                -transition: 1s linear;                transform-origin: center 180px;            }            h2{                width: 6px;                height: 160px;                background-color: #fff;                position: absolute;                left: 197px;                top:40px;                transform-origin: center 160px;                border-radius:20%;            }            h3{                width: 8px;                height: 140px;                background-color: #fff;                position: absolute;                left: 196px;                top:60px;                transform-origin: center 140px;                transform: rotate(0deg);                border-radius: 20%;            }            h4{                width: 30px;                height: 30px;                position: absolute;                left: 185px;                top:185px;                border-radius: 50%;                background-color: orange;            }            span{                display: inline-block;                width: 20px;                height: 20px;                line-height: 20px;                text-align: center;                font-size: 24px;                position: absolute;                left: -10px;                top: 28px;                color: #fff;            }        </style>

(function(){            var oUl=document.getElementById('box');            var timer=null;            for(var i=0,j=0;i<60;i++,j+=6){                var oLi=document.createElement('li');                oLi.style.transform='rotate('+j+'deg)';                if(i%5==0){                    oLi.style.height='20px';                    var oSpan=document.createElement('span');                    oSpan.style.transform='rotate('+(-j)+'deg)';                    if(i==0){                        oSpan.innerHTML='12';                        oSpan.style.fontSize='30px';                        oSpan.style.left='-17px';                    }else{                        oSpan.innerHTML=parseInt(i/5);                        if(i%15==0){                            oSpan.style.fontSize='36px';                        }                    }                    oLi.appendChild(oSpan);                }                if(i==0){                    var oH1=document.createElement('h1');                    var oH2=document.createElement('h2');                    var oH3=document.createElement('h3');                    var oH4=document.createElement('h4');                    oUl.appendChild(oH1);                    oUl.appendChild(oH2);                    oUl.appendChild(oH3);                    oUl.appendChild(oH4);                }                oUl.appendChild(oLi);            }            var oH=document.getElementsByTagName('h3')[0];            var oM=document.getElementsByTagName('h2')[0];            var oS=document.getElementsByTagName('h1')[0];            timer=setInterval(function(){                 var now = new Date();                 var s=now.getSeconds();                 var m=now.getMinutes()+s/60;                 var h=now.getHours()+m/60;                 oS.style.transform='rotate('+s*6+'deg)';                 oM.style.transform='rotate('+m*6+'deg)';                 oH.style.transform='rotate('+(h%12)*30+'deg)';            },30);        })();

作品截图
这里写图片描述

阅读全文

1 0