效果如下
思路写在注释里面啦
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>时钟</title>
<style>
.box {
margin: 100px auto;
width: 300px;
height: 300px;
border: 10px solid #cccccc;
position: relative;
}
.box .cir {
width: 15px;
height: 15px;
background-color: #ccc;
}
.box>.line {
height: 300px;
width: 10px;
position: absolute;
background-color: #cccccc;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
/* 指定刻度线的位置 */
.box>.line2 {
width: 7px;
transform: translate(-50%, -50%) rotateZ