文本/链接

纯CSS3响应式扁平风格垂直时间轴

阿里云


responsive-timeline 是一款非常酷的纯 CSS3 响应式扁平风格垂直时间轴 UI 设计效果。它使用媒体查询来制作响应式效果,在大屏幕和小屏幕切换时,时间轴元素带有平滑的过渡动画效果。

HTML 结构

  1. <div id="timeline">
  2.   <div class="timeline-item">
  3.     <div class="timeline-icon"> <img src="assets/images/star.svg" alt=""> </div>
  4.     <div class="timeline-content">
  5.       <h2>LOREM IPSUM DOLOR</h2>
  6.       <p> ... </p>
  7.       <a href="#" class="btn">button</a> </div>
  8.   </div>
  9.   <div class="timeline-item">
  10.     <div class="timeline-icon"> <img src="assets/images/book.svg" alt=""> </div>
  11.     <div class="timeline-content right">
  12.       <h2>LOREM IPSUM DOLOR</h2>
  13.       <p> ... </p>
  14.       <a href="#" class="btn">button</a> </div>
  15.   </div>
  16.   <div class="timeline-item">
  17.     <div class="timeline-icon"> <img src="assets/images/star.svg" alt=""> </div>
  18.     <div class="timeline-content">
  19.       <h2>LOREM IPSUM DOLOR</h2>
  20.       <p> ... </p>
  21.       <a href="#" class="btn">button</a> </div>
  22.   </div>
  23. </div>
也想出现在这里?联系我们
创客主机

所有的时间轴样式代码都放置在 base.css 文件中。CSS 代码非常简单,请参考下载文件。

纯 CSS3 响应式扁平风格垂直时间轴

已有 426 人购买
查看演示升级 VIP立刻购买

演示地址 下载地址
收藏
(1)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!