css3实现时钟动画
用css3实现 时钟动画，背景是4张图片，做成时钟效果
效果图：
其中上面包括4张透明图：圆圈（90*90），时(30*30)，分(30*30)，秒(30*30)
html代码：
<div id="clock" class="clock">
<div id="hours" class="hours trans3600">div>
<div id="min" class="min trans60">div>
<div id="sec" class="sec trans1">div>
div>
css3:
.clock{
position: absolute;
left: 200px;
top: 150px;
width: 90px;
height: 90px;
background: url(../image/clock.png) no-repeat;
}
.hours{
position: absolute;
top: 21px;
left: 25px;
width: 30px;
height: 30px;
background: url(../image/hour.png) no-repeat;
}
.min{
position: absolute;
top: 17px;
left: 36px;
width: 30px;
height: 30px;
background: url(../image/min.png) no-repeat;
}
.sec{
position: absolute;
top: 38px;
left: 30px;
width: 30px;
height: 30px;
background: url(../image/sec.png) no-repeat;
}
/*动画*/
/**/
@-webkit-keyframes seconds {
to {
-webkit-transform:rotate(480deg)
}
}
@-moz-keyframes seconds {
to {
-moz-transform:rotate(480deg)
}
}
@keyframes seconds {
to {
transform:rotate(480deg)
}
}
@-webkit-keyframes minutes {
to {
-webkit-transform:rotate(422deg)
}
}
@-moz-keyframes minutes {
to {
-moz-transform:rotate(422deg)
}
}
@keyframes minutes {
to {
transform:rotate(422deg)
}
}
@-webkit-keyframes hours {
to {
-webkit-transform:rotate(335deg)
}
}
@-moz-keyframes hours {
to {
-moz-transform:rotate(335deg)
}
}
@keyframes hours {
to {
transform:rotate(335deg)
}
}
.trans3600{
-webkit-transform-origin: 20px 20px;
/*-webkit-transform: rotate(-25deg);*/
-webkit-animation: hours 43200s linear 0s infinite;
-moz-transform-origin: 20px 20px;
/*-moz-transform: rotate(-25deg);*/
-moz-animation: hours 43200s linear 0s infinite;
transform-origin: 20px 20px; /* 设置旋转中心点，在这个例子中，秒钟上的圆圈坐标是20px 20px*/
/*transform: rotate(-25deg);*/
animation: hours 43200s linear 0s infinite;
}
.trans60{
-webkit-transform-origin: 8px 25px;
-webkit-transform: rotate(62deg);
-webkit-animation: minutes 3600s linear 0s infinite;
-moz-transform-origin: 8px 25px;
-moz-transform: rotate(62deg);
-moz-animation: minutes 3600s linear 0s infinite;
transform-origin: 8px 25px; /* 设置旋转中心点，在这个例子中，秒钟上的圆圈坐标是8px 25px*/
transform: rotate(62deg);
animation: minutes 3600s linear 0s infinite;
}
.trans1{
-webkit-transform-origin: 15px 5px;
-webkit-transform: rotate(120deg);
-webkit-animation: seconds 60s steps(60, end) 0s infinite;
-moz-transform-origin: 15px 5px;
-moz-transform: rotate(120deg);
-moz-animation: seconds 60s steps(60, end) 0s infinite;
transform-origin: 15px 5px; /* 设置旋转中心点，在这个例子中，秒钟上的圆圈坐标是15px 5px*/
transform: rotate(120deg);
animation: seconds 60s steps(60, end) 0s infinite;
}