1、准备好需要用到的图标。
2、新建html文档。
3、书写hmtl代码。
<div class="icon_clock">
<div class="hour"></div>
<div class="second" id="second"></div>
<div class="minutes"></div>
<div class="top"></div>
<div class="top1"></div>
<div class="ball"></div>
<div class="top1"></div>
</div>
4、书写css代码。
<style>
.icon_clock{background-image: url("image/clock-icon.png");width: 700px;height:700px;margin: 0 auto;
padding-top:50px; background-repeat: no-repeat}
.hour{background-image: url("image/时针.png");width: 37px;height: 290px;background-repeat: no-repeat;margin-left:326px;;
margin-top: 145px;display: block;position: absolute;z-index: 11;-moz-transform:rotate(45deg);
}
.second{;background-image: url("image/秒针.png");width: 37px;height: 330px;background-repeat: no-repeat;margin-left:326px;;
margin-top: 125px;display: block;position: absolute;z-index: 13;-moz-transform:rotate(900deg);
}
.minutes{background-image: url("image/分针.png");width: 37px;height: 290px;background-repeat: no-repeat;margin-left:326px;;
;margin-top: 145px;display: block;position: absolute;z-index: 12; -moz-transform:rotate(60deg);
}
.top{position: absolute;z-index: 1;background-color: rgba(255, 0, 0, 0);background-image: url("image/12.png");background-repeat: no-repeat;
width: 50px;height: 50px;margin-left: 321px;margin-top: 123px;}
.top1{position: absolute;z-index: 2;background-color: rgba(255, 0, 0, 0);background-image: url("image/12.png");background-repeat: no-repeat;
width: 50px;height: 50px;margin-left: 315px;margin-top: 110px;background-size: 120% 120%;display: none}
.ball{position: absolute;z-index: 2;background-image: url("image/qiu.png");background-repeat: no-repeat;width: 255px;height: 50px;margin-left:215px;margin-top: 260px;
ani mation:rond 3s infinite;background-color: rgba(255, 0, 0, 0);
-we bkit-ani mation:rond 3s infinite;}
</style>
5、代码整体结构。
6、查看效果。
