css3实现旋转表
如图所示：
css部分：
<style> #clock{width:100px; height:100px; border-radius:50%; border:4px solid black; position:relative; } #s{width:2px; height:55px; position:absolute; top:5px; left:49px; background-color:red; transform-origin:50% 45px; -webkit-animation:rotate 60s linear infinite; } #m{width:4px; height:50px; position:absolute; top:10px; left:48px; background-color:black; transform-origin:50% 40px; -webkit-animation:rotate 3600s linear infinite; } #h{width:6px; height:45px; position:absolute; top:15px; left:47px; background-color:black; transform-origin:50% 35px; -webkit-animation:rotate 43200s linear infinite; } @-webkit-keyframes rotate{ 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} } div[id^="a"]{position:absolute; font-size:.1em; text-align:center; width:7px; height:5px; top:0; left: 46.5px; transform-origin:50% 50px; } #a1{transform:rotate(30deg)} #a2{transform:rotate(60deg)} #a3{transform:rotate(90deg)} #a4{transform:rotate(120deg)} #a5{transform:rotate(150deg)} #a6{transform:rotate(180deg)} #a7{transform:rotate(210deg)} #a8{transform:rotate(240deg)} #a9{transform:rotate(270deg)} #a10{transform:rotate(300deg)} #a11{transform:rotate(330deg)} </style>
<!DOCTYPE html> <html> <head> <title> new document </title> <meta charset="utf-8"/> </head> <body> <div id="clock"> <div id="h"></div> <div id="m"></div> <div id="s"></div> <div id="a1">I</div> <div id="a2">II</div> <div id="a3">III</div> <div id="a4">IIII</div> <div id="a5">V</div> <div id="a6">VI</div> <div id="a7">VII</div> <div id="a8">VIII</div> <div id="a9">IX</div> <div id="a10">X</div> <div id="a11">XI</div> <div id="a12">XII</div> </div> </body> </html>
