[分享]css3怎么画刻度

在CSS3中，我们可以通过transform属性和伪元素来实现刻度绘制。下面是一个示例代码：

/* 定义刻度线的样式 */
.tick {
   position: absolute;
   width: 2px;
   height: 10px;
   background-color: #333;
}

/* 定义刻度线的旋转样式 */
.tick::before {
   content: '';
   position: absolute;
   top: -25px;
   left: 49%;
   width: 0;
   height: 0;
   border-style: solid;
   border-width: 0 5px 25px 5px;
   border-color: transparent transparent #333 transparent;
   transform-origin: bottom center;
}

/* 定义刻度线旋转的角度 */
.tick.one::before {
   transform: rotate(30deg);
}

.tick.two::before {
   transform: rotate(60deg);
}

.tick.three::before {
   transform: rotate(90deg);
}

/* 通过循环生成刻度 */
.container {
   position: relative;
}

.container::after {
   content: '';
   position: absolute;
   width: 2px;
   height: 100px;
   background-color: #333;
   top: 0;
   left: 50%;
   transform: translateX(-50%);
}

.container .tick {
   transform-origin: top center;
}

.container .tick:nth-child(2n+1) {
   height: 20px;
}

.container .tick:nth-child(5n) {
   height: 30px;
}

/* 使用JS控制刻度线的位置 */
var deg = 0;

setInterval(function() {
   deg += 1;
   var ticks = document.querySelectorAll('.tick');
   for (var i = 0; i < ticks.length; i++) {
      ticks[i].style.transform = 'rotate(' + (deg + i * 6) + 'deg)';
   }
}, 50); 

以上代码实现了一个简单的刻度盘效果。我们可以通过循环生成刻度线，并使用伪元素和transform属性来控制刻度线的旋转角度。同时，我们还可以通过JS控制刻度线的位置，让它动起来。这是CSS3中绘制刻度的一种方法，大家可以自己尝试一下，掌握更多CSS3的技巧。