css3实现时钟动画



用css3实现 时钟动画,背景是4张图片,做成时钟效果

效果图:

css3实现时钟动画_第1张图片


其中上面包括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;

}


你可能感兴趣的:(css3)