纯CSS简单实现漂亮的timeline时间轴效果(样式1)

红太狼 2021-11-29 07:44 1827阅读 0赞

## 背景 ##

最近需要用到timle效果，网上提供很多案例都加了很多特效，代码也比较复杂。最终找到了一个样式精美，代码简洁的timeline效果。我简单分享一下实现原理，并配上代码，供大家参考。

## 效果图 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tvdXJ5b3VzaGluZQ_size_16_color_FFFFFF_t_70]

## 实现原理 ##

右侧列表是ul > li \* n的列表布局，该布局的样式完全是自己定义，和timeline实现无关  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tvdXJ5b3VzaGluZQ_size_16_color_FFFFFF_t_70 1]  
实现过程拆分起来很简单

1.  ul的样式利用 ：before属性为期增加一条灰色的线,宽度5px,绝对定位，距离母窗体左侧2.4rem（计算得到），无论窗体如何变化，灰色线距离左侧位置固定。

.timeline-small-body ul::before {
        content: ' ';
        height: 100%;
        width: 5px;
        background-color: #d9d9d9;
        position: absolute;
        top: 0;
        left: 2.4em;
        z-index: -1;

![在这里插入图片描述][20190721173850651.png]  
2. 设置li 前面远点的样式，具体窗体左侧为2rem

.timeline-small-body ul {
        padding: 1em 0 0 2em;
        margin: 0;
        list-style: none;
        position: relative;
    }

设置小球样式：

*  球的半径是0.5rem
 *  长宽1人，radius50%的背景色圆球。

.timeline-small-body .bullet.pink {
        background-color: hotpink;
        border: 3px solid #F93B69;
    }
    .timeline-small-body .bullet {
        width: 1rem;
        height: 1rem;
        box-sizing: border-box;
        border-radius: 50%;
        background: #fff;
        z-index: 1;
        margin-right: 1rem;
        margin-top: 7%;
    }

![在这里插入图片描述][20190721174753916.png]  
以上通过ul 设置：before的一条灰色时间线距离左侧2.4rem, 通过padding-left：2rem让小球的位置和时间线重合，然后设置小球的样式。比较简单就实现了时间线的功能。

## 源码 ##

不废话了，大家看了源码就全懂了。简单几行代码就可以实现timeline。

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <meta name="viewport"
              content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
        <title>timeline</title>
        <style>
            .timeline-small {
                max-width: 350px;
                max-height: 630px;
                overflow: hidden;
                margin: 30px auto 0;
                box-shadow: 0 0 40px #a0a0a0;
                font-family: 'Open Sans', sans-serif;
            }
            .timeline-small-body ul {
                padding: 1em 0 0 2em;
                margin: 0;
                list-style: none;
                position: relative;
            }
            .timeline-small-body ul::before {
                content: ' ';
                height: 100%;
                width: 5px;
                background-color: #d9d9d9;
                position: absolute;
                top: 0;
                left: 2.4em;
                z-index: -1;
            }
            .timeline-small-body li div {
                display: inline-block;
                margin: 1em 0;
                vertical-align: top;
            }
            .timeline-small-body .bullet {
                width: 1rem;
                height: 1rem;
                box-sizing: border-box;
                border-radius: 50%;
                background: #fff;
                z-index: 1;
                margin-right: 1rem;
                margin-top: 7%;
            }
            .timeline-small-body .bullet.pink {
                background-color: hotpink;
                border: 3px solid #F93B69;
            }
            .timeline-small-body .bullet.green {
                background-color: lightseagreen;
                border: 3px solid #B0E8E2;
            }
            .timeline-small-body .bullet.blue {
                background-color: aquamarine;
                border: 3px solid cadetblue;
            }
            .timeline-small-body .bullet.orange {
                background-color: salmon;
                border: 3px solid #EB8B6E;
            }
            .timeline-small-body .date {
                width: 23%;
                font-size: 0.75em;
                padding-top: 0.40rem;
                padding-right: 2rem;
            }
            .timeline-small-body .desc {
                width: 50%;
            }
            .timeline-small-body h3 {
                font-size: 0.9em;
                font-weight: 400;
                margin: 0;
            }
            .timeline-small-body h4 {
                margin: 0;
                font-size: 0.7em;
                font-weight: 400;
                color: #808080;
            }
        </style>
    </head>
    
    <body>
    
    
    <div class="timeline-small">
        <div class="timeline-small-body">
            <ul>
                <li>
                    <div class="bullet pink"></div>
                    <div class="date">XXXX年XX月XX日</div>
                    <div class="desc">
                        <h3>内容段落1</h3>
                        <h4>内容段落2内容段落2内容段落2内容段落2</h4>
                    </div>
                </li>
                <li>
                    <div class="bullet orange"></div>
                    <div class="date">XXXX年XX月XX日</div>
                    <div class="desc">
                        <h3>内容段落1</h3>
                        <h4>内容段落2内容段落2内容段落2内容段落2</h4>
                    </div>
                </li>
                <li>
                    <div class="bullet blue"></div>
                    <div class="date">XXXX年XX月XX日</div>
                    <div class="desc">
                        <h3>内容段落1</h3>
                        <h4>内容段落2内容段落2内容段落2内容段落2</h4>
                    </div>
                </li>
                <li>
                    <div class="bullet green"></div>
                    <div class="date">XXXX年XX月XX日</div>
                    <div class="desc">
                        <h3>内容段落1</h3>
                        <h4>内容段落2内容段落2内容段落2内容段落2</h4>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    
    </body>
    
    
    
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tvdXJ5b3VzaGluZQ_size_16_color_FFFFFF_t_70]: /images/20211129/ce91364a45bc42efb0510132fcdd4128.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tvdXJ5b3VzaGluZQ_size_16_color_FFFFFF_t_70 1]: /images/20211129/bab1f399527e4b1eabd43bccbb859343.png
[20190721173850651.png]: /images/20211129/cc10584d544c4db8bf81c7b837e7879c.png
[20190721174753916.png]: /images/20211129/fe3805d0a3fa49ea9e15899680e25f67.png