CSS实现时间线样式

怼烎@ 2023-06-14 11:59 24阅读 0赞

### 在项目中要实现一个时间线，找了半天的插件感觉没啥合适的，于是便百度撸了一个纯CSS实现的模仿layui ###

**css代码如下：**

ul,li {
                /*做时间轴的线*/
                margin: 0;
                padding: 0;
            }
    
            .layui-timeline {
                padding-left: 50%;
                padding-top:20px
            }
    
            .layui-timeline-item {
                position: relative;
                padding-bottom: 20px;
                margin-top:-12px;
            }
    
            li {
                list-style: none;
            }
    
            .layui-timeline-item:first-child::before {
                display: block;
            }
    
            .layui-timeline-item:last-child::before {
                content: '';
                position: absolute;
                left: 5px;
                top: 0;
                z-index: 0;
                width: 0;
                
            }
    
            .layui-timeline-item::before {
                content: '';
                position: absolute;
                /* left: 5px; */
                top: 0;
                z-index: 0;
                width: 1px;
                height: 100%;
            }
    
            .layui-timeline-item::before,
            hr {
                background-color: #569fff;
            }
    
            .layui-timeline-axis {
                position: absolute;
                left: -5px;
                top: 0;
                z-index: 10;
                width: 20px;
                height: 20px;
                line-height: 20px;
                background-color: #fff;
                color: #5FB878;
                border-radius: 50%;
                text-align: center;
                cursor: pointer;
            }
    
            .layui-icon {
                font-family: layui-icon !important;
                font-size: 16px;
                font-style: normal;
            }
    
            .layui-timeline-content {
                padding-left: 25px;
            }
    
            .layui-text {
                line-height: 22px;
                font-size: 14px;
                color: #666;
                top:-10px;
            }
    
            .layui-timeline-title {
                position: relative;
                margin-bottom: 10px;
            }
    
            .circle {
                width: 10px;
                height: 10px;
                border-radius: 50%;
                border: 1px solid #569fff;
            }
    
            .etime-first {
                top: 45%;
                left: -100px;
                position: absolute;
            }
    
            .time-first {
                position: absolute;
                left: -60px;
            }

**HTML代码如下：**

<ul class="layui-timeline">
            
            <li class="layui-timeline-item">
                <div class="relative">
                    <span class="time-first">06:40</span>
                    <span class="etime-first">3小时15分钟</span>
                </div>
                <i class="layui-icon layui-timeline-axis circle"></i>
                <div class="layui-timeline-content layui-text">
                    <h3 class="layui-timeline-title">8月16日</h3>
                    <p>杜甫的思想核心是儒家的仁政思想，他有<em>“致君尧舜上，再使风俗淳”</em>的宏伟抱负。个人最爱的名篇有：</p>
                    <ul>
                        <li>《登高》</li>
                        <li>《茅屋为秋风所破歌》</li>
                    </ul>
                </div>
            </li>
            <li class="layui-timeline-item">
                <div class="relative">
                    <span class="time-first">06:40</span>
                    <span class="etime-first">3小时15分钟</span>
                </div>
                <i class="layui-icon layui-timeline-axis circle"></i>
                <div class="layui-timeline-content layui-text">
                    <h3 class="layui-timeline-title">8月15日</h3>
                    <p>
                        中国人民抗日战争胜利日
                        <br>常常在想，尽管对这个国家有这样那样的抱怨，但我们的确生在了最好的时代
                        <br>铭记、感恩
                        <br>所有为中华民族浴血奋战的英雄将士
                        <br>永垂不朽
                    </p>
                </div>
    
    
            </li>
            <li class="layui-timeline-item">
                <i class="layui-icon layui-timeline-axis circle"></i>
                <div class="layui-timeline-content layui-text">
                    <div class="layui-timeline-title">过去</div>
                </div>
            </li>
        </ul>

**效果如下：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjkyMzQ5_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjkyMzQ5_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191119180037528.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjkyMzQ5,size_16,color_FFFFFF,t_70