<!DOCTYPE html><html lang='zh-cn'> <head> <title>css3时钟动画</title> <meta charset="utf-8"> <style type="text/css"> *{ margin: 0; padding: 0; } ul{ list-style: none; } h1{ text-align: center; color: #333; margin-top: 40px; font-family: 'Microsoft yahei'; } /*表盘*/ .clock{ position: relative; width: 200px; height: 200px; border-radius: 100%; background-color: #292a38; margin: 50px auto; } .pointer li.circle{ position: absolute; top: 50%; left: 50%; transform-origin: left center; background: #fff; width: 10px; height: 10px; border-radius: 100%; margin-top: -5px; margin-left: -5px; } /*刻度*/ .line-hour li, .line-min li{ position: absolute; left: 50%; top: 50%; transform-origin: left center; background-color: #fff; } .line-hour li{ width: 10px; height: 2px; } .line-min li{ width: 5px; height: 2px; } /*数字*/ .number{ position: absolute; left: 50%; top: 50%; height: 150px; width: 150px; transform: translate(-50%,-50%); font-family: 'Microsoft yahei'; font-size: 16px; color: #fff; } .number li{ position: absolute; transform: translate(-50%,-50%); } /*指针*/ .pointer li{ position: absolute; top: 50%; left: 50%; transform-origin: left center; background: #fff; } .pointer li.hour{ width: 45px; height: 3px; margin-top: -1px; } .pointer li.min{ width: 60px; height: 2px; margin-top: -1px; } .pointer li.sec{ width: 80px; height: 1px; margin-top: -1px; } </style> </head> <body> <h1>CSS 时钟效果分布实现</h1> <div class="clock"> <ul class="line-min"></ul> <ul class="line-hour"></ul> <ol class="number"></ol> <ul class="pointer"> <li class="hour"></li> <li class="min"></li> <li class="sec"></li> <li class="circle"></li> </ul> </div> <script src="jquery.min.js"></script> <script type="text/javascript"> $(function(){ function init(){ drawLines($('.line-min'),60,85); drawLines($('.line-hour'),12,80); drawNumbers($('.number')); move(); } init(); /* *绘制钟表刻度线 *@param wrap 刻度线的父容器 *@param total 制度线的总个数 *@param translateX 制度线在X轴方向的偏移量 */ function drawLines(wrap,total,translateX){ var gap=360/total; var strHtml=''; for(var i=0;i<total;i++){ strHtml+='<li style="transform:rotate('+(i*gap)+'deg) translate('+translateX+'px,-50%)"></li>'; } wrap.html(strHtml); } /* *绘制时钟数字 *@param wrap数字的父容器 */ function drawNumbers(wrap){ var radius=wrap.width()/2; var strHtml=''; for(var i=1;i<=12;i++){ myAngle=(i-3)/6*Math.PI; var myX=radius+radius*Math.cos(myAngle),//X=r+rcos(@) myY=radius+radius*Math.sin(myAngle);//Y=r+rsin(@) strHtml+='<li style="left:'+myX+'px;top:'+myY+'px">'+i+'</li>'; } wrap.html(strHtml); } /*钟表走动、转动秒针、分针、时针*/ function move(){ var domHour=$('.hour'), domMin=$('.min'), domSec=$('.sec'); setInterval(function(){ var now=new Date(), hour=now.getHours(), min=now.getMinutes(), sec=now.getSeconds(); var secAngle=sec*6-90, minAngle=min*6+sec*0.1-90, hourAngle=hour*30+min*0.5-90; domSec.css('transform','rotate('+secAngle+'deg)'); domMin.css('transform','rotate('+minAngle+'deg)'); domHour.css('transform','rotate('+hourAngle+'deg)'); document.title=hour+':'+min+':'+sec; },1000); } }); </script> </body></html>
