纯js+css实现在线时钟
本文实例为大家分享了js+css实现在线时钟的具体代码,供大家参考,具体内容如下
时钟 *{ padding:0; margin:0; } .wrap{ position:absolute; width:200px; height:200px; border:2pxsolid; background-color:pink; border-radius:50%; left:50%; top:50%; transform:translate(-50%,-50%); } .wrap>ul{ list-style:none; } .wrap>ul>li{ position:absolute; left:99px; top:0; width:2px; height:10px; background-color:black; transform-origin:center100px; } .wrap>ul>li:nth-child(5n+1){ height:15px; } .wrap>.hour{ position:absolute; left:97px; top:70px; width:6px; height:30px; background:black; transform-origin:centerbottom; } .wrap>.min{ position:absolute; left:98px; top:50px; width:4px; height:50px; background:gray; transform-origin:centerbottom; } .wrap>.sec{ position:absolute; left:99px; top:30px; width:2px; height:70px; background:red; transform-origin:centerbottom; } .wrap>.center{ position:absolute; left:90px; top:90px; width:20px; height:20px; border-radius:50%; background:black; }