时间轴

Posted 2021-03-14 webmuluo

个人实际开发中用到的效果问题总结出来便于自己以后开发查看调用,如果也适用其他人请随意拿走勿喷就行!

这个就是一个普通的时间轴，是我看到小红书官网上面的一个效果就模仿写了下来，具体样子下面有动图显示，可自行修改样式。

 

                          

以上是效果图，下面是代码。

html代码

<div style="width:400px;margin: 0 auto;">
        <h3 style="margin-bottom: 20px;">2020年事件</h3>
        <ul>
            <li class="con">
                <h4 class="conMonth">1月</h4>
                <div class="conContent">
                    <div class="conContentLeft">
                        <i></i>
                        <span class="span"><span class="spanColor"></span></span>
                    </div>
                    <p class="conContentRight">工作顺利发大财</p>
                </div>
            </li>
            <li class="con">
                <h4 class="conMonth">2月</h4>
                <div class="conContent">
                    <div class="conContentLeft">
                        <i></i>
                        <span class="span"><span class="spanColor"></span></span>
                    </div>
                    <p class="conContentRight">发财！发财！发大财！</p>
                </div>
            </li>
            <li class="con">
                <h4 class="conMonth"></h4>
                <div class="conContent">
                    <div class="conContentLeft">
                        <i></i>
                        <span class="span"><span class="spanColor"></span></span>
                    </div>
                    <p class="conContentRight">身体健康，倍棒！</p>
                </div>
            </li>
            <li class="con">
                <h4 class="conMonth">3月</h4>
                <div class="conContent">
                    <div class="conContentLeft">
                        <i></i>
                        <span class="span"><span class="spanColor"></span></span>
                    </div>
                    <p class="conContentRight">幸福美满，快乐至上！</p>
                </div>
            </li>
        </ul>
    </div>

CSS代码

<style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            width: 100%;
            height: auto;
        }
        li{
            list-style: none;
            clear: both;
        }
        .con{
            width: 100%;
            height: 65px;
        }
        .conMonth{
            float: left;
            width: 35px;
            height: 20px;
        }
        .conContent{
            float: left;
            width: auto;
            height: 20px;
            font-size: 14px;
            line-height: 20px;
        }
        .conContentLeft{
            width: 5px;
            height: auto;
            float: left;
            margin-right: 20px;
        }
        .conContentRight{
            float: left;
            color: #333;
        }
        .conContentLeft i{
            display: block;
            width: 5px;
            height: 5px;
            background: #eee;
            border-radius: 50%;
            margin-top: 10px;
        }
        .span{
            width: 1px;
            height: 45px;
            display: block;
            background: #eee;
            margin: 5px 0 0 2px;
            position: relative;
            z-index: 11;
        }
        .spanColor{
            width: 1px;
            height: 1px;
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 111;
            animation-fill-mode: forwards;
        }
        @keyframes myfirst{
            0% {
                height: 1px;
                background: red;
            }
            100% {
                height: 45px;
                background: red;
            }
        }
        
    </style>

JS代码

<script>
    (()=>{
        var aSpan = document.getElementsByClassName(‘spanColor‘);
        var aP = document.getElementsByClassName(‘conContentRight‘);
        var aI = document.getElementsByTagName(‘i‘);
        var arr = 0;
        aSpan[0].style.animation = ‘myfirst 3s ease .5s infinite alternate‘;
        aI[0].style.background = ‘red‘;
        aP[0].style.color = ‘red‘;
        setInterval(()=>{
            arr++;
            for(var f=0;f<aSpan.length;f++){
                aSpan[f].style.animation = ‘none‘;
                aI[f].style.background = ‘#eee‘;
                aP[f].style.color = ‘#333‘;
            }
            if(arr >= f){
                arr = 0;
            }
            aI[arr].style.background = ‘red‘;
            aP[arr].style.color = ‘red‘;
            aSpan[arr].style.animation = ‘myfirst 3s ease .5s infinite alternate‘;
        },3500);
    })();
</script>