css实现刻度尺效果代码-html代码-BFW代码库

代码语言：html

代码描述：css实现刻度尺效果代码

代码标签：效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
  
  
<style>
hr {
  position: absolute;
  top: 50%;
  width: 10px;
  left: -0.5vw;
  transform-origin: 0 0;
}

hr:nth-child(0) {
  transform: translateX(-1.0204081633vw) rotate(90deg);
}

hr:nth-child(1) {
  width: 25px;
  transform: translateX(0vw) rotate(90deg);
}

hr:nth-child(2) {
  transform: translateX(1.0204081633vw) rotate(90deg);
}

hr:nth-child(3) {
  transform: translateX(2.0408163265vw) rotate(90deg);
}

hr:nth-child(4) {
  transform: translateX(3.0612244898vw) rotate(90deg);
}

hr:nth-child(5) {
  transform: translateX(4.0816326531vw) rotate(90deg);
}

hr:nth-child(6) {
  width: 15px;
  transform: translateX(5.1020408163vw) rotate(90deg);
}

hr:nth-child(7) {
  transform: translateX(6.1224489796vw) rotate(90deg);
}

hr:nth-child(8) {
  transform: translateX(7.1428571429vw) rotate(90deg);
}

hr:nth-child(9) {
  transform: translateX(8.1632653061vw) rotate(90deg);
}

hr:nth-child(10) {
  transform: translateX(9.1836734694vw) rotate(90deg);
}

hr:nth-child(11) {
  width: 25px;
  transform: translateX(10.2040816327vw) rotate(90deg);
}

hr:nth-child(12) {
  transform: translateX(11.2244897959vw) rotate(90deg);
}

hr:nth-child(13) {
  transform: translateX(12.2448979592vw) rotate(90deg);
}

hr:nth-child(14) {
  transform: translateX(13.2653061224vw) rotate(90deg);
}

hr:nth-child(15) {
  transform: translateX(14.2857142857vw) rotate(90deg);
}

hr:nth-child(16) {
  width: 15px;
  transform: translateX(15.306122449vw) rotate(90deg);
}

hr:nth-child(17) {
  transform: translateX(16.3265306122vw) rotate(90deg);
}

hr:nth-child(18) {
  transform: translateX(17.3469387755vw) rotate(90deg);
}

hr:nth-child(19) {
  transform: translateX(18.3673469388vw) rotate(90deg);
}

hr:nth-child(20) {
  transform: translateX(19.387755102vw) rotate(90deg);
}

hr:nth-child(21) {
  width: 25px;
  transform: translateX(20.4081632653vw) rotate(90deg);
}

hr:nth-child(22) {
  transform: translateX(21.4285714286vw) rotate(90deg);
}

hr:nth-child(23) {
  transform: translateX(22.4489795918vw) rotate(90deg);
}

hr:nth-child(24) {
  transform: translateX(23.4693877551vw) rotate(90deg);
}

hr:nth-child(25) {
  transform: translateX(24.4897959184vw) rotate(90deg);
}

hr:nth-child(26) {
  width: 15px;
  transform: translateX(25.5102040816vw) rotate(90deg);
}

hr:nth-child(27) {
  transform: translateX(26.5306122449vw) rotate(90deg);
}

hr:nth-child(28) {
  transform: translateX(27.5510204082vw) rotate(90deg);
}

hr:nth-child(29) {
  transform: translateX(28.5714285714vw) rotate(90deg);
}

hr:nth-child(30) {
  transform: translateX(29.5918367347vw) rotate(90deg);
}

hr:nth-child(31) {
  width: 25px;
  transform: translateX(30.612244898vw) rotate(90deg);
}

hr:nth-child(32) {
  transform: translateX(31.6326530612vw) rotate(90deg);
}

hr:nth-child(33) {
  transform: translateX(32.6530612245vw) rotate(90deg);
}

hr:nth-child(34) {
  transform: translateX(33.6734693878vw) rotate(90deg);
}

hr:nth-child(35) {
  transform: translateX(34.693877551vw) rotate(90deg);
}

hr:nth-child(36) {
  width: 15px;
  transform: translateX(35.7142857143vw) rotate(90deg);
}

hr:nth-child(37) {
  transform: translateX(36.7346938776vw) rotate(90deg);
}

hr:nth-child(38) {
  transform: translateX(37.7551020408vw) rotate(90deg);
}

hr:nth-child(39) {
  transform: translateX(38.7755102041vw) rotate(90deg);
}

hr:nth-child(40) {
  transform: translateX(39.7959183673vw) rotate(90deg);
}

hr:nth-child(41) {
  width: 25px;
  transform: translateX(40.8163265306vw) rotate(90deg);
}

hr:nth-child(42) {
  transform: translateX(41.8367346939vw) rotate(90deg);
}

hr:nth-child(43) {
  transform: translateX(42.8571428571vw) rotate(90deg);
}

hr:nth-child(44) {
  transform: translateX(43.8775510204vw) rotate(90deg);
}

hr:nth-child(45) {
  transform: translateX(44.8979591837vw) rotate(90deg);
}

hr:nth-child(46) {
  width: 15px;
  transform: translateX(45.9183673469vw) rotate(90deg);
}

hr:nth-child(47) {
  transform: translateX(46.9387755102vw) rotate(90deg);
}

hr:nth-child(48) {
  transform: translateX(47.9591836735vw) rotate(90deg);
}

hr:nth-child(49) {
  transform: translateX(48.9795918367vw) rotate(90deg);
}

hr:nth-child(50) {
  transform: translateX(50vw) rotate(90deg);
}

hr:nth-child(51) {
  width: 25px;
  transform: translateX(51.0204081633vw) rotate(90deg);
}

hr:nth-child(52) {
  transform: translateX(52.0408163265vw) rotate(90deg);
}

hr:nth-child(53) {
  transform: translateX(53.0612244898vw) rotate(90deg);
}

hr:nth-child(54) {
  transform: translateX(54.0816326531vw) rotate(90deg);
}

hr:nth-child(55) {
  transform: translateX(55.1020408163vw) rotate(90deg);
}

hr:nth-child(56) {
  width: 15px;
  transform: translateX(56.1224489796vw) rotate(90deg);
}

hr:nth-child(57) {
  transform: translateX(57.1428571429vw) rotate(90deg);
}

hr:nth-child(58) {
  transform: translateX(58.1632653061vw) rotate(90deg);
}

hr:nth-child(.........完整代码请登录后点击上方下载按钮下载查看