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

博主：网友小宋
发布时间：2022 年 02 月 18 日
495 次浏览
9 条评论
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

版权声明：
本站分享提供的所有内容仅供学习、分享与交流，我们不保证内容的正确性。通过使用本站内容随之而来的风险与本站无关。
本站的原创内容均以知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议发布，若须转载本站文章请务必注明出处，谢谢。

最后修改：2022 年 04 月 25 日

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

9 条评论

I'm 代代付
March 2nd, 2022 at 10:41 pm

技术人才，值得学习。

回复
1. 网友小宋
  March 2nd, 2022 at 11:43 pm
  
  @I'm 代代付
  
  这个是跟csdn上看到的，最近再调另外一种微语功能
  
  回复
亮娃子日志
February 23rd, 2022 at 10:19 pm

厉害哦啊

回复
1. 首席大作家
  February 23rd, 2022 at 10:28 pm
  
  @亮娃子日志
  
  欢迎大佬大驾光临。[f=huaixiao]
  
  回复
vian
February 20th, 2022 at 10:25 pm

简介好看实用很不错

回复
1. 首席大作家
  February 20th, 2022 at 10:29 pm
  
  @vian
  
  最近在研究研究，有没有新的办法可以实现，这个显示有时候有问题。[f=xiaoku]
  
  回复
  1. vian
    February 20th, 2022 at 10:30 pm
    
    @首席大作家
    
    加油我的typecho站点自带我也没用过有个记录很不错
    
    回复
    
    首席大作家
    February 20th, 2022 at 10:32 pm
    
    @vian
    
    不想折腾了，从wp换到typecho太麻烦了，我树莓派搭建的typecho
    
    回复
    
    vian
    February 20th, 2022 at 10:33 pm
    
    @首席大作家
    
    没必要换来换去的
    
    回复

发表评论取消回复

评论 *

私密评论

名称 *

🎲

邮箱 *

地址

记录美好生活
可能会用到先收藏一下
老达
不错，让工友们24小时在线ヾ(≧∇≦*)ゝ
小鹿生活志
小鹿生活志不定期回访博客、催更博主，希望博主拥有用不完的创作灵...
初心
博客名字：初心博客博客地址：https://blog.52cx...
初心
记得设置JD支付密码

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

网友小宋 • 2022 年 02 月 18 日

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

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

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

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

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

效果图：  <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>

以上内容参考自CSDN

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

9 条评论

发表评论取消回复

使用树莓派创建一个网站服务器-网友小宋

十年之约，我在虫洞里等你！

年已过半，过去再见，未来你好！

最近添了个华为4G路由器

一个开源网络书签程序-OneNav

Joplin-支持多平台Markdown编辑器

不折腾了主题了，以后一周一更或者两更了。

Wordpress更改固定连接后界面404的解决办法

宝塔搭建青龙面板给服务器回血

typecho建站已经可以通过外网访问了。

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

9 条评论

发表评论 取消回复

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

发表评论取消回复