首页 > > 网页制作 > css >

css3实现旋转表

2018-06-24 01:19:05来源：未知阅读 ()

如图所示：

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>