怎么才能让数字在横线上缩小了数字还在横线上

最新推荐文章于 2024-05-18 15:14:09 发布

与妖为邻

最新推荐文章于 2024-05-18 15:14:09 发布

阅读量157

点赞数 2

文章标签： css css3 前端

本文链接：https://blog.csdn.net/lulei5153/article/details/138289623

版权

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>刻度</title>
</head>
<style type="text/css">
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        list-style: none;
    }
   /* 刻度尺 */
    .rile {
        background-color: #891313;
        border-radius: 5px 5px 0 0;
        height: 85vh;
        width: 60px;
        position: relative;
        /*  translate（）相当于水平平移，+ 表示向右/下，- 表示向左/上
            translateX（x）水平方向平移
            translateY（y）垂直方向平移
            translateZ（z）相当于放大
            translate（x,y）相当于水平平移+垂直平移
            translate（x,y,z）相当于水平平移+垂直平移+放大 */
       transform: translate(400px, 80px);
    }
   ul {
        width: 80%;
        height: 100%;
        position: relative;
        display: flex;
        justify-content: space-between;
        flex-direction: column-reverse;
        margin: 0 auto;
        /* counter-reset: num -2; */
        counter-reset: num -1;
   }
   .list>li {
        width: 80%;
        height: 0.2vh;
        background-color: rgb(255, 255, 255);
        position: relative;
        color: aliceblue;
        margin: 2px auto;
   }
   .list>li:before {
        /* counter-increment: num 2; */
        counter-increment: num 1;
        content: counter(num);
        position: relative;
        top: 5vh;
        left: 10px;
        /* content: '01'; */
        /* 个位补零 */
        content: counter(num, decimal-leading-zero);
        /* transform: translate(1vh, 5vh);  */
    }
   /* ol {
        position: absolute;
        top: 100px;
        left: 50%;
        counter-reset: count;
    }
   ol li {
        counter-increment: count;
    }
   ol li::after {
        /* 个位补零 */
        /* content: "[" counter(count, decimal-leading-zero) "] == [" counter(count,
                lower-alpha) "]";
    } */
</style> 

<body>
    <div class="rile">
        <ul id="list" class="list">
            <!--尺子需要几个单位就加几个-->
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <ol>
        <li></li>
        <li></li>
        <li></li>
    </ol>
</body>
<script>
    /* const rile = document.querySelector('.rile')
     const list = document.querySelector('#list')
     const li = list.querySelectorAll('li')
     let num = 0
     let timer = null
     const start = () => {
         timer = setInterval(() => {
             num += 1
             if (num > 50) {
                 num = 0
             }
             rile.style.transform = `translate(${400 + num * 10}px, 80px)`
             li.forEach((item, index) => {
                 if (index < num) {
                     item.style.backgroundColor = 'rgb(255, 255, 255)'
                 } else {
                     item.style.backgroundColor = 'aliceblue'
                 }
             })
         }, 1000)
     }
     const stop = () => {
         clearInterval(timer)
     }
     start()  */
</script>

</html>