前端代码编写小时钟
没有用到图片,指针也是自己用自己写的。主要难度就在于指针位置的固定与旋转。
* {
margin: 0;
padding: 0;
}
#one {
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
width: 750px;
height: 150px;
border: 1px solid;
border-radius: 10px;
background: linear-gradient(#086cc1, #6ba9e1);
color: white;
}
li {
display: flex;
justify-content: center;
align-items: center;
list-style: none;
float: left;
width: 250px;
height: 100px;
}
#clock {
width: 100px;
height: 100px;
border: 1px solid;
border-radius: 50px;
position: relative;
left: 30px;
transform: rotate(-90deg);
}
#clock .bg {
width: 5px;
height: 5px;
border-radius: 50%;
background: #fff;
position: absolute;
left: 50%;
top: 50%;
}
#clock .point {
position: absolute;
left: 50%;
top: 50%;
}
#clock #hour {
width: 30px;
height: 2px;
background: #fff;
margin: -1px 0 0 0 0;
transform-origin: 0 0.5px;
border-radius: 10px;
}
#clock #minute {
width: 40px;
height: 2px;
background: black;