当先锋百科网

首页 1 2 3 4 5 6 7

HTML+CSS实现时间轴效果

先看效果

在这里插入图片描述

<!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>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #f1f1f1;
        }

        .time_axis {
            width: 802px;
            /* height: 700px; */
            /* border: 1px solid #010101; */
            margin: 0 auto;
            margin-top: 10px;
        }

        .time_left {
            width: 400px;
            /* height: 300px; */
            float: left;
            /* background-color: green; */
            border-right: 2px solid #b1bbf9;
            position: relative;
        }

        .time_rigth {
            width: 400px;
            /* height: 300px; */
            float: right;
            /* background-color: blue; */
            border-left: 2px solid #b1bbf9;
            position: relative;
        }

        .time_axis .time_dian {
            width: 10px;
            height: 10px;
            background-color: #FFF;
            display: block;
            border: 2px solid #b1bbf9;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            margin-top: -7px;
        }

        .time_left .time_dian {
            right: -9px;
        }

        .time_rigth .time_dian {
            left: -9px;
        }

        .time_axis .jiantou_rigth {
            position: absolute;
            top: 50%;
            margin-top: -16px;
            left: 5px;
            width: 0;
            height: 0;
            border-right: 15px solid #FFF;
            border-bottom: 15px solid transparent;
            border-top: 15px solid transparent;
        }

        .time_axis .jiantou_left {
            position: absolute;
            top: 50%;
            right: 5px;
            margin-top: -16px;
            width: 0;
            height: 0;
            width: 0;
            height: 0;
            border-top: 15px solid transparent;
            border-left: 15px solid #FFF;
            border-bottom: 15px solid transparent;
        }
        .time_axis .con{
            /* height: 200px; */
            background-color: #FFF;
            padding: 15px;
            border-radius:10%;
        }
        .time_axis .time_left .con{
            margin-right: 20px;
        }
        .time_axis .time_rigth .con{
            margin-left: 20px;
        }
        .con img{
            width: 100%;
        }
    </style>
</head>

<body>
    <div class="time_axis">
        <div class="time_left">
            <span class="time_dian"></span>
            <span class="jiantou_left"></span>
            <div class="con">
                <h3>测试</h3>
                <span>11111</span>
                <img src="https://img1.baidu.com/it/u=413643897,2296924942&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1681405200&t=9243e3c17ae7567e4725cc9b65d4fccc" alt="">
            </div>
        </div>
        <div class="time_rigth">
            <span class="time_dian"></span>
            <span class="jiantou_rigth"></span>
            <div class="con">
                <h3>测试11</h3>
                <span>11111111</span>
                <img src="https://img1.baidu.com/it/u=413643897,2296924942&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1681405200&t=9243e3c17ae7567e4725cc9b65d4fccc" alt="">
            </div>
        </div>
        <div class="time_left">
            <span class="time_dian"></span>
            <span class="jiantou_left"></span>
            <div class="con">
                <h3>测试11</h3>
                <span>11111111</span>
                <img src="https://img1.baidu.com/it/u=413643897,2296924942&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1681405200&t=9243e3c17ae7567e4725cc9b65d4fccc" alt="">
            </div>
        </div>
        <div class="time_rigth">
            <span class="time_dian"></span>
            <span class="jiantou_rigth"></span>
            <div class="con">
                <h3>测试11</h3>
                <span>11111111</span>
                <img src="https://img1.baidu.com/it/u=413643897,2296924942&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1681405200&t=9243e3c17ae7567e4725cc9b65d4fccc" alt="">
            </div>
        </div>
    </div>
</body>

</html>