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

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

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

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

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

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

请输入图片描述

代码如下：

<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

已有 11 条评论

vian

2022年02月20日 22:25 Windows 10+ · Edge 98 IP 广东省广州市移动回复

简介好看实用很不错
1. 首席大作家
  
  2022年02月20日 22:29 Android 12 · Chrome 97 IP 河南省郑州市移动回复
  
  最近在研究研究，有没有新的办法可以实现，这个显示有时候有问题。[f=xiaoku]
  1. vian
    
    2022年02月20日 22:30 Windows 10+ · Edge 98 IP 广东省广州市移动回复
    
    加油我的typecho站点自带我也没用过有个记录很不错
    
    首席大作家
    
    2022年02月20日 22:32 Android 12 · Chrome 97 IP 河南省郑州市移动回复
    
    不想折腾了，从wp换到typecho太麻烦了，我树莓派搭建的typecho
    
    vian
    
    2022年02月20日 22:33 Windows 10+ · Edge 98 IP 广东省广州市移动回复
    
    没必要换来换去的
亮娃子日志

2022年02月23日 22:19 Windows 10+ · Chrome 86 IP 四川省成都市电信回复

厉害哦啊
1. 首席大作家
  
  2022年02月23日 22:28 Android 12 · Chrome 97 IP 河南省郑州市移动回复
  
  欢迎大佬大驾光临。[f=huaixiao]
I'm 代代付

2022年03月02日 22:41 Android 10 · 夸克 5 IP 贵州省黔东南州移动回复

技术人才，值得学习。
1. 网友小宋
  
  2022年03月02日 23:43 Windows 7 · Chrome 97 IP 河南省漯河市电信回复
  
  这个是跟csdn上看到的，最近再调另外一种微语功能
Rose

2022年12月26日 21:28 Windows 10+ · Chrome 108 IP 河南省郑州市移动回复

代码拿走了 ::aru:diving::
1. 网友小宋
  
  2022年12月26日 23:57 Android 12 · Edge 107 回复
  
  自己改改哈。

子夜松声

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

已有 11 条评论

发表评论