60秒跳动60次旋转360度。（可以使用linear 线性运动）
# animation:anim_mm 60s linear infinite
animation:mm 60s steps(60) infinite
@keyframes mm{
to{ transform:rotate(360deg) }
}
<!DOCTYPE HTML><html>
<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8">
<title>无标题文档</title>
<style>
#box{width:206pxheight:206px margin:80px auto position:relative}
#dial{height:200pxborder:3px solid #000 border-radius:103px position:relative}
#box span{ width:2pxheight:6pxbackground:#666 position:absoluteleft:99pxtop:0-webkit-transform-origin:0 100px}
#hand{ width:12pxheight:12px position:absoluteleft:97pxtop:97px}
#hour{ width:4px height:45pxbackground:#000 position:absoluteleft:4pxbottom:6px -webkit-transform-origin:bottom}
#min{width:2pxheight:60pxbackground:#666 position:absoluteleft:5pxbottom:6px-webkit-transform-origin:bottom}
#sec{width:2pxheight:75pxbackground:red position:absoluteleft:5pxbottom:6px-webkit-transform-origin:bottom}
#centre{height:12pxborder-radius:9pxbackground:#000 position:relative}
#dial span:nth-of-type(5n+1){height:10pxbackground:#000}
</style>
<script>
window.onload=function()
{
var oDial=document.getElementById("dial")
var oHour=document.getElementById("hour")
var oMin=document.getElementById("min")
var oSec=document.getElementById("sec")
toDial(oDial)
toTime(oHour,oMin,oSec)
setInterval(function(){
toTime(oHour,oMin,oSec)
},1000)
}
function toTime(oHour,oMin,oSec)
{
var oDate=new Date()
var iSec=oDate.getSeconds()
var iMin=oDate.getMinutes()+iSec/60
var iHour=(oDate.getHours()%12)+iMin/60
oSec.style.WebkitTransform="rotate("+(iSec*360/60)+"deg)"
oMin.style.WebkitTransform="rotate("+(iMin*360/60)+"deg)"
oHour.style.WebkitTransform="rotate("+(iHour*360/12)+"deg)"
}
function toDial(obj)
{
var sHtml=""
var iDeg=6
for(var i=0i<60i++)
{
sHtml+="<span style='-webkit-transform:rotate("+iDeg*i+"deg)'></span>"
}
obj.innerHTML=sHtml
}
</script>
</head>
<body>
<div id="box">
<div id="dial">
</div>
<div id="hand">
<div id="hour"></div>
<div id="min"></div>
<div id="sec"></div>
<div id="centre"></div>
</div>
</div>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）