.clock {
width:300px;
height:300px;
background:#fff;
margin:0 auto;
margin-top:100px;
border-radius:50%;
position:relative;
border:5px #b70b0b solid;
}
.clock::before {
content:"";
border:10px #fe1313 solid;
width:310px;
height:310px;
border-radius:50%;
position:absolute;
left:-15px;
top:-15px;
}
.circle {
z-index:2;
border:2px #f1807b solid;
border-radius:50%;
left:144px;
top:144px;
width:10px;
height:10px;
position:absolute;
background:#fff;
}
.circle::before {
content:"";
width:6px;
height:6px;
background:#c13837;
border-radius:50%;
position:absolute;
left:2px;
top:2px;
}
.hour_hand {
width:70px;
height:6px;
background:#676767;
/*border-radius:30% 50% 50% 30%;
*/
position:absolute;
left:150px;
top:150px;
z-index:1;
transform:rotate(-90deg);
transform-origin:0 2px;
}
.minute_hand {
width:90px;
height:6px;
background:#676767;
/*border-radius:30% 50% 50% 30%;
*/
position:absolute;
left:150px;
top:150px;
z-index:1;
transform:rotate(-90deg);
transform-origin:0 2px;
}
.second_hand {
width:110px;
height:2px;
background:#f1807b;
/*border-radius:30% 50% 50% 30%;
*/
position:absolute;
left:150px;
top:150px;
z-index:1;
transform:rotate(0deg);
transform-origin:0 1px;
}
.second_hand::before {
content:"";
display:block;
width:0;
height:0;
border-width:6px 0 6px 9px;
border-style:solid;
border-color:transparent transparent transparent #f1807b;
position:absolute;
top:-5px;
left:110px;
}
.scale {
width:300px;
height:300px;
border-radius:50%;
position:relative;
top:-11px;
left:3px;
}
.scale ul {
list-style-type:none;
}
.scale ul li {
width:6px;
height:6px;
background:#a2a2a2;
border-radius:50%;
position:absolute;
transform-origin:2px 0;
}
.scale ul li.liVertical {
width:12px;
height:6px;
background:#666665;
border-radius:0%;
}
.scale ul li.liVertical span {
display:block;
top:-8px;
left:-20px;
position:absolute;
}
1.jquery用的比较少,主要是用来生成样式比较方便才用的
2.jquery的版本可以随意,只要1.8以上版本即可!