CSS简单实现漂亮的timeline时间轴、时间线

博主：网友小宋
发布时间：2022 年 02 月 18 日
2304 次浏览
11 条评论
2541字数
分类：建站技术

为什么会有这个，因为我想要这个功能。

年纪大了，不想搞那么复杂。

就查了很多帖子文章发现这个也挺好。

当然有插件之类的，但是有点小贵，主要是还都是英文。

废话不多说了，上效果图和代码。代码可以自己修改，稍微有点基础就可以试着调。

效果图：  <span style="color: #ff0000;"><strong><a href="https://www.xyzbz.cn/weiyu" target="_blank" style="color: #ff0000;" rel="noopener">页面展示</a></strong></span>

![请输入图片描述](http://img.xyzbz.cn/i/2022/04/19/625e8da42e715.png)

代码如下：

```
<pre class="corepress-code-pre"><code><!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>
```

以上内容参考自CSDN

版权声明 ▶ 本网站名称：网友小宋
▶ 本文链接：https://www.xyzbz.cn/archives/525/
▶ 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长进行核实删除。
▶ 转载本站文章需要遵守：商业转载请联系站长，非商业转载请注明出处！！

最后修改：2022 年 04 月 25 日

如果觉得我的文章对你有用，请随意赞赏

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

评论 *

私密评论

名称 *

🎲

邮箱 *

地址

11 条评论

Rose Google Chrome 108.0.0.0 Windows 10
2022年12月26日 21:28:31

代码拿走了

回复
1. 网友小宋 Microsoft Edge 107.0.1418.43 Android 12
  2022年12月26日 23:57:02
  
  @Rose
  
  自己改改哈。
  
  回复
I'm 代代付夸克 5.5.2.203 Android 10
2022年03月02日 22:41:39

技术人才，值得学习。

回复
1. 网友小宋 Google Chrome 97.0.4692.71 Windows 7
  2022年03月02日 23:43:44
  
  @I'm 代代付
  
  这个是跟csdn上看到的，最近再调另外一种微语功能
  
  回复
亮娃子日志 Google Chrome 86.0.4240.198 Windows 10
2022年02月23日 22:19:23

厉害哦啊

回复
1. 首席大作家 Google Chrome 97.0.4692.98 Android 12
  2022年02月23日 22:28:03
  
  @亮娃子日志
  
  欢迎大佬大驾光临。[f=huaixiao]
  
  回复
vian Microsoft Edge 98.0.1108.56 Windows 10
2022年02月20日 22:25:03

简介好看实用很不错

回复
1. 首席大作家 Google Chrome 97.0.4692.98 Android 12
  2022年02月20日 22:29:24
  
  @vian
  
  最近在研究研究，有没有新的办法可以实现，这个显示有时候有问题。[f=xiaoku]
  
  回复
  1. vian Microsoft Edge 98.0.1108.56 Windows 10
    2022年02月20日 22:30:16
    
    @首席大作家
    
    加油我的typecho站点自带我也没用过有个记录很不错
    
    回复
    
    首席大作家 Google Chrome 97.0.4692.98 Android 12
    2022年02月20日 22:32:14
    
    @vian
    
    不想折腾了，从wp换到typecho太麻烦了，我树莓派搭建的typecho
    
    回复
    
    vian Microsoft Edge 98.0.1108.56 Windows 10
    2022年02月20日 22:33:27
    
    @首席大作家
    
    没必要换来换去的
    
    回复