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

最新推荐文章于 2024-09-17 21:04:39 发布

如何在5年薪百万

最新推荐文章于 2024-09-17 21:04:39 发布

阅读量3.5w

点赞数 37

分类专栏：前端技术

本文链接：https://blog.csdn.net/kouryoushine/article/details/96739387

版权

前端技术专栏收录该内容

14 篇文章 4 订阅

订阅专栏

背景

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

效果图

在这里插入图片描述

实现原理

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

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;

在这里插入图片描述
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%;
}

在这里插入图片描述
以上通过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>