设计思路:将一个盒子,通过border-radius:50%变为圆,然后画六条线通过定位平分圆,中间再画一个圆背景设置为白色,遮住多余部分。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.bp{
width: 400px;
height: 400px;
border: 3px solid red;
border-radius: 50%;
position: relative;
margin: 100px auto;
}
.line{
width: 6px;
height: 400px;
background-color: black;
position:absolute;
left: 50%;
margin-left: -3px;
}
/*时钟刻度线*/
.er{
transform: rotateZ(90deg);
}
.san{
transform: rotateZ(30deg);
}
.si{
transform: rotateZ(60deg);
}
.wu{
transform: rotateZ(120deg);
}
.liu{
transform: rotateZ(150deg);
}
/*将刻度线遮住,只留一部分*/
.box{
width: 350px;
height: 350px;
border-radius: 50%;
background-color: white;
position: absolute;
left: 50%;
margin-left: -175px;
top: 25px;
z-index: 2;
}
/*制作中心的小黑点*/
.cen{
border: 10px solid black;
position: absolute;
border-radius: 50%;
top: 190px;
left: 190px;
z-index: 99;
}
/*时针的设置*/
.shi{
width:10px;
height: 140px;
background-color: #000000;
position: absolute;
left: 195px;
z-index: 4;
top: 60px;
/*设置旋转中心为底部中心*/
transform-origin: center bottom;
/*43200s一圈,分12步走完*/
animation: move 43200s steps(12) 0s infinite;
}
.Fen{
width:8px;
height: 160px;
background-color: black;
position: absolute;
left: 195px;
z-index: 5;
top:40px ;
/*设置旋转中心为底部中心*/
transform-origin: center bottom;
/*3600s一圈,分60步走完*/
animation: move 3600s steps(60) 0s infinite;
}
.miao{
width:6px;
height: 180px;
background-color: black;
position: absolute;
left: 195px;
z-index: 6;
top:20px ;
/*设置旋转中心为底部中心*/
transform-origin: center bottom;
/*60s一圈,分60步走完*/
animation: move 60s steps(60) 0s infinite;
}
/*设置旋转从0度到360度*/
@keyframes move{
0%{
transform: rotateZ(0deg);
}
100%{
transform: rotateZ(360deg);
}
</style>
</head>
<body>
<div class="bp">
<div class="yi line"></div>
<div class="er line"></div>
<div class="san line"></div>
<div class="si line"></div>
<div class="wu line"></div>
<div class="liu line"></div>
<div class="box"></div>
<div class="cen"></div>
<div class="shi"></div>
<div class="Fen"></div>
<div class="miao"></div>
</div>
</body>
</html>