18种html5纯css3纵向时光轴 - Jazz Timeline

桃扇骨 2022-03-16 08:44 360阅读 0赞

在项目中用到时间轴，百度找到这款 **纯css纵向时光轴** 感觉超棒，样式丰富，满足我的基本需求，简单记录下

下载地址：[http://www.jqueryfuns.com/resource/2288][http_www.jqueryfuns.com_resource_2288]

下载好之后，里面有这18种样式的demo参考

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDAyODU0_size_16_color_FFFFFF_t_70][]

**只需要把 jazz-timeline.css 放到项目引用即可**

### **一、基本 样式 div 构成** ###

**1、样式都包裹在 div 中**

在<div class="jazz-timeline">  中加入 .dark-timeline 或者 solid-shadow 等 改变 **时间轴的颜色** 或 **单边时间轴** 等样式

**2、<div class="jazz-timeline">  包含多个时间轴节点内容：**

由三部分组成：时间轴节点旁小内容、时间轴节点时间 和 节点旁主要内容。

<div class="timeline-post">
         <div class="timeline-meta for-large-icons">
             <div class="meta-details">Crystal Loren</div> 
         </div> 
    
          <div class="timeline-icon icon-larger iconbg-turqoise icon-color-white">
               <div class="icon-placeholder">Dec <span>25</span></div>
               <div class="timeline-bar"></div>
          </div>
    
          <div class="timeline-content">
              <h2 class="content-title"> Christmas Day </h2>
              <div class="content-details">
                  <p>Christmas or Christmas Day is an annual festival commemorating the birth of Jesus Christ,
     observed most commonly on December 25 as a religious and cultural celebration
     among billions of people around the world. </p>
              </div>
          </div>
    </div>

在 <div class="timeline-post"> 中加入 .opal-post 、blue-post 等 改变 **主题内容的背影颜色**，

时间轴节点的样式 参考demo 去选择。

根据需求选择不同的 demo 时间轴样式，非常感谢插件源码作者

[http_www.jqueryfuns.com_resource_2288]: http://www.jqueryfuns.com/resource/2288
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDAyODU0_size_16_color_FFFFFF_t_70]: /images/20220316/401c25c0172f45edae6a3a61eff7efd1.png