老师上课需要我们做一个时钟的小作业 ,我把它放在上面记录一下啦
表盘和时针我都是用的背景图的形式,然后绝对定位,通过调整left和top确定时针、分针、秒针的位置,transform-origin设置它们的旋转中心
具体效果:
HTML代码:
<div class="box" id="box">
<span></span>
<span></span>
<span></span>
</div>
css代码:
div.box{
width: 620px;
height: 620px;
background: url("images/time.jpg") no-repeat;
background-size: 100%;
margin: 20px auto;
position: relative;
}
div.box span{
position: absolute;
}
div.box span:nth-child(3){
width: 58px;
height: 208px;