CSS 时间轴样式效果

亦凉 2022-08-29 05:45 322阅读 0赞

# 效果预览 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMzNTA0OTU_size_16_color_FFFFFF_t_70][]

# 源码 #

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>时间轴</title>
            <meta name="keywords" content="黄河爱浪,WEB前端河浪,jQuery插件开发者河浪,uView-UI河浪">
    		<meta name="description" content="QQ:1846492969,邮箱:helang.love@qq.com">
            <style type="text/css">
            body{
                font-size: 14px;
                color: #323232;
                font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
                margin: 0;
                padding: 0;
            }
            .time-line{
                width: 1000px;
                margin: 0 auto;
                list-style: none;
                padding: 0;
            }
            .time-line>li{
                padding: 0;
                margin: 0 0 16px 0;
                overflow: hidden;
            }
    
            .time-line .item-box{
                width: 50%;
                float: left;
            }
    
            .time-line .item-box .year{
                border-style: dotted;
                border-width: 0;
                border-color: #ccc;
                font-size: 24px;
                position: relative;
    
                padding: 58px 48px 28px 0;
                text-align: right;
                border-bottom-width: 3px;
                border-right-width: 3px;
                border-bottom-right-radius: 32px;
            }
            .time-line .item-box .year::after{
                content: '';
                display: block;
                width: 16px;
                height: 16px;
                background-color: #6b8cc7;
                border-radius: 50%;
                position: absolute;
                top: 0;
                right: -9px;
            }
            .time-line .item-box .year::before{
                content: '';
                display: block;
                width: 30%;
                height: 3px;
                background-image: linear-gradient(to right,#fff, rgba(0,0,0,0));
                position: absolute;
                bottom: -3px;
                left: 0;
            }
    
            .time-line .item-box .content{
                padding: 28px 48px;
                text-align: right;
            }
    
            .time-line .item-box .year.active{
                color: #6b8cc7;
            }
    
            /* 右边 */
            .time-line .item-box.right{
                float: right;
            }
            .time-line .item-box.right .year{
                padding: 58px 0 28px 48px;
                text-align: left;
                border-right-width: 0;
                border-left-width: 3px;
                border-bottom-left-radius: 32px;
                border-bottom-right-radius: 0;
            }
    
            .time-line .item-box.right .year::after{
                right: auto;
                left: -9px;
            }
            .time-line .item-box.right .year::before{
                background-image: linear-gradient(to left,#fff, rgba(0,0,0,0));
                left: auto;
                right: 0;
            }
            .time-line .item-box.right .content{
                text-align: left;
            }
        </style>
        </head>
        <body>
            <h1 style="text-align: center;margin: 0;padding: 50px;">时间轴</h1>
            <ul class="time-line">
                <li>
                    <div class="item-box">
                        <div class="year left active">
                            2018
                        </div>
                        <div class="content">
                            <div>成为苏宁体育数据服务商与国内知名体育日报合作</div>
                        </div>
                    </div>
                </li>
                
                <li>
                    <div class="item-box right">
                        <div class="year left">
                            2019
                        </div>
                        <div class="content">
                            <div>10月,足彩全套数据上线</div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="item-box">
                        <div class="year left">
                            2020
                        </div>
                        <div class="content">
                            <div>成为苏宁体育数据服务商与国内知名体育日报合作</div>
                        </div>
                    </div>
                </li>
            </ul>
        </body>
    </html>

> 作者：[黄河爱浪][Link 1] QQ：1846492969，邮箱：helang.love@qq.com
> 
> 公众号：`web-7258`，本文原创，著作权归作者所有，转载请注明原链接及出处

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMzNTA0OTU_size_16_color_FFFFFF_t_70]: /images/20220829/bc58d2c516824f47a439d5c798cef915.png
[Link 1]: https://blog.csdn.net/u013350495