本文只是用于练习,所以兼容性没有解决,只做谷歌的兼容,具体代码如下:
<!DOCTYPE html>
<html>
<head>
<title> 时钟 </title>
<meta charset="utf-8"/>
<meta name="HSW" content="">
<meta name="Keywords" content="">
<style>
div.d1 {
margin-top:20px;
width:500px;
height:500px;
border:6px solid #00f;
border-radius:50%;
position:relative;
}
div.d4 {
width:8px;
height:80px;
background-color:red;
position:absolute;
top:170px;
left:242px;
transform-origin:4px 95px;
-webkit-animation:fenzhen 86400s linear 0s infinite;
}
div.d2 {
width:8px;
height:100px;
background-color:green;
position:absolute;
top:150px;
left:242px;
transform-origin:4px 95px;
-webkit-animation:fenzhen 3600s linear 0s infinite;
}
div.d3 {
width:5px;
height:150px;
background-color:blue;
position:absolute;
top:100px;
left:245px;
/*设置旋转原点坐标*/
transform-origin:2.5px 145px;
-webkit-animation:miaozhen 60s linear 0s infinite;
}
@-webkit-keyframes miaozhen {
from{
transform:rotate(0deg);
}to{
transform:rotate(360deg);
}
}
@-webkit-keyframes fenzhen {
from{
transfom:rotate(0);
}to{
transform:rotate(360deg);
}
}
div[id^="a"]{
position:absolute;
font-size:.5em; text-align:center;
width:7px; height:5px;
top:0; left: 245px;
transform-origin:50% 250px;
}
#a4,#a8{font-size:.4em; font-weight:bold}
#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>
</head>
<body>
<div class="d1">
<div class="d4"></div>
<div class="d3"></div>
<div class="d2"></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>