css做钟表,使用css3做钟表

最新推荐文章于 2022-04-24 17:18:24 发布

weixin_39543835

最新推荐文章于 2022-04-24 17:18:24 发布

阅读量221

点赞数

文章标签： css做钟表

本文介绍了一种使用纯CSS实现的时钟动画效果，通过精确的定位和转换属性，使得时钟指针能够准确地指向每一分钟。文章详细展示了如何为时钟的小时、分钟和秒针设置动画，并通过JavaScript获取当前时间来更新指针的位置。

摘要由CSDN通过智能技术生成

.wrap{width:200px;height:200px;border:2px solid #000;border-radius:50%;margin:100px auto;position:relative;}li{position:absolute;width:2px;height:5px;top:0;left:99px;background:#000;-webkit-transform-origin:center 100px;}

/*li:nth-child(1){-webkit-transform: rotate(0deg);}

li:nth-child(2){-webkit-transform: rotate(6deg);}

li:nth-child(3){-webkit-transform: rotate(12deg);}

li:nth-child(4){-webkit-transform: rotate(18deg);}

li:nth-child(5){-webkit-transform: rotate(24deg);}

li:nth-child(6){-webkit-transform: rotate(30deg);}*/li:nth-child(5n+1){height:10px;}#hour{width:6px;height:40px;background:#000;position:absolute;left:97px;top:60px;-webkit-transform-origin:bottom;}#min{width:4px;height:60px;background:#999;position:absolute;left:98px;top:40px;-webkit-transform-origin:bottom;}#sec{width:2px;height:70px;background:#f00;position:absolute;left:99px;top:30px;-webkit-transform-origin:bottom;}.ico{width:10px;height:10px;background:#000;position:absolute;top:95px;left:95px;border-radius:50%;}

window.οnlοad=function(){varoUl=document.getElementById("list");varoCss=document.getElementById("css");varoHour=document.getElementById("hour");varoMin=document.getElementById("min");varoSec=document.getElementById("sec");varaLi=‘‘;varsss=‘‘;for(vari=0;i<60;i++){

aLi+="

sss+=‘li:nth-child(‘+(i+1)+‘){-webkit-transform: rotate(‘+i*6+‘deg);}‘}

oUl.innerHTML=aLi;

oCss.innerHTML+=sss;functiontoTime(){vardate=newDate();varmySec=date.getSeconds();varmyMin=date.getMinutes()+mySec/60;

varmyHour=date.getHours()+myMin/60;

oHour.style.webkitTransform=‘rotate(‘+myHour*30+‘deg)‘;

oMin.style.webkitTransform=‘rotate(‘+myMin*6+‘deg)‘;

oSec.style.webkitTransform=‘rotate(‘+mySec*6+‘deg)‘;

}

toTime();

setInterval(toTime,1000);

}