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

来源:csdn博客 分类: 文章浏览史 发布时间:2020-08-28 23:08:52 最后更新:2020-08-28 浏览:115
转载声明:
本文为摘录自“csdn博客”,版权归原作者所有。
温馨提示:
为了更好的体验,请点击原文链接进行浏览
摘录时间:
2020-08-28 23:08:52

背景

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

效果图

在这里插入图片描述

实现原理

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

  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;

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

php技术微信