用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;
}