.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以上版本即可!