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>技能训练4-5</title>
<style>
div.wrap{
margin: 0 auto
width:400px
height:110px
border:1px solid gray
}
div.wrap>#b{
text-align:center
font:bolder 30px '宋体'
color:red
background-color:gray
height:40px
}
div.wrap>#c{
text-align:center
font:normal 25px '黑体'
}
</style>
<script>
onload=function(){
var c=document.getElementById("c")
setInterval(function(){
var now=new Date
var y=now.getFullYear()
var M=now.getMonth()+1
var d=now.getDate()
var h=now.getHours()
var m=now.getMinutes()
var s=now.getSeconds()
var e=now.getDay()
var w
if(h<12){
w="上午"
}else if(w<18){
w="下午"
}else{
w="晚上"
}
h=h>12?h-12:h
h=h<10?"0"+h:h
m=m<10?"0"+m:m
s=s<10?"0"+s:s
c.innerHTML=y+"年"+M+"月"+d+"日 星期"+"日一二三四五六".split("")[e]
+"<br />"+w+" "+h+":"+m+":"+s
},1000)
}
</script>
</head>
<body>
<div class="wrap">
<div id="b">
<span>我的小时钟</span>
</div>
<div id="c">
</div>
</div>
</body>
</html>
