CSS 时间轴样式效果_jquery蛇形时间轴-CSDN博客

本文链接：https://blog.csdn.net/u013350495/article/details/119273357

效果预览

源码

<!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>