纯CSS简单实现漂亮的timeline时间轴效果(样式1)

背景

最近需要用到timle效果，网上提供很多案例都加了很多特效，代码也比较复杂。最终找到了一个样式精美，代码简洁的timeline效果。我简单分享一下实现原理，并配上代码，供大家参考。

效果图

实现原理

右侧列表是ul > li * n的列表布局，该布局的样式完全是自己定义，和timeline实现无关

实现过程拆分起来很简单

ul的样式利用：before属性为期增加一条灰色的线,宽度5px,绝对定位，距离母窗体左侧2.4rem（计算得到），无论窗体如何变化，灰色线距离左侧位置固定。

.timeline-small-body ul::before {content: ' ';height: 100%;width: 5px;background-color: #d9d9d9;position: absolute;top: 0;left: 2.4em;z-index: -1;

2. 设置li 前面远点的样式，具体窗体左侧为2rem

.timeline-small-body ul {padding: 1em 0 0 2em;margin: 0;list-style: none;position: relative;
}

设置小球样式：

球的半径是0.5rem
长宽1人，radius50%的背景色圆球。

.timeline-small-body .bullet.pink {background-color: hotpink;border: 3px solid #F93B69;
}
.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%;
}

以上通过ul 设置：before的一条灰色时间线距离左侧2.4rem, 通过padding-left：2rem让小球的位置和时间线重合，然后设置小球的样式。比较简单就实现了时间线的功能。

源码

不废话了，大家看了源码就全懂了。简单几行代码就可以实现timeline。

<!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>
</head><body><!-- 主要内容部分 -->
<div class="timeline-small"><div class="timeline-small-body"><ul><li><div class="bullet pink"></div><div class="date">XXXX年XX月XX日</div><div class="desc"><h3>内容段落1</h3><h4>内容段落2内容段落2内容段落2内容段落2</h4></div></li><li><div class="bullet orange"></div><div class="date">XXXX年XX月XX日</div><div class="desc"><h3>内容段落1</h3><h4>内容段落2内容段落2内容段落2内容段落2</h4></div></li><li><div class="bullet blue"></div><div class="date">XXXX年XX月XX日</div><div class="desc"><h3>内容段落1</h3><h4>内容段落2内容段落2内容段落2内容段落2</h4></div></li><li><div class="bullet green"></div><div class="date">XXXX年XX月XX日</div><div class="desc"><h3>内容段落1</h3><h4>内容段落2内容段落2内容段落2内容段落2</h4></div></li></ul></div>
</div></body></html>

纯CSS简单实现漂亮的timeline时间轴效果(样式1)相关推荐

html简单垂直时间轴,简单的响应式垂直时间轴效果
这是一款简单的响应式垂直时间轴效果.该垂直时间轴效果使用bootstrap网格进行布局,在小屏幕设备上会将所有的时间节点占满整行垂直排列. 使用方法在页面中引入bootstrap.min.css文件 ...
精致纯CSS打造绿色漂亮导航栏
代码简介: 极精致的纯CSS实现的菜单,兼容性非常好,条例WEB标准,能用性好,用到有修饰图片,请根据代码地址自己下载. 代码内容: <!DOCTYPE html PUBLIC "-/ ...
html怎么让方块自动旋转,如何使用纯CSS实现一个圆环旋转错觉的动画效果（附源码）...
本篇文章给大家带来的内容是关于如何使用纯CSS实现一个圆环旋转错觉的动画效果,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览源代码下载 https://github.com ...
css实现人走路效果,如何使用纯CSS实现一个人独自行走的动画效果（附源码）
本篇文章给大家带来的内容是关于如何使用纯CSS实现一个人独自行走的动画效果(附源码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览源代码下载 https://github ...
用 CSS 从零写一个时间轴效果
时间轴效果介绍在前端开发中,我们会遇到一些场景特别适合用时间轴来展示,例如下面按照日期时间来记录发生的事件: 还可以做成下面这种比较流行的左右对称卡片风格的时间轴: 如果再稍加装饰,还能有更加高大上 ...
vue使用iview Timeline 时间轴不显示问题
vue Timeline 时间轴不显示渲染的效果官网代码 <Timeline pending><TimelineItem>发布1.0版本</TimelineItem&g ...
纯CSS实现帅气的SVG路径描边动画效果
一.应该人人皆会的基础技术简而言之,就是让SVG的描边像是有人绘制一样的动画效果. 国外很多相关介绍的文章,来看看一些效果gif吧~ 纯CSS实现帅气的SVG路径描边动画效果纯CSS实现帅气的SV ...
怎样实现banner自动播放html,纯css实现轮播图banner自动轮换效果
话不多说直接上代码 * { margin: 0; padding: 0; } .container { margin:300px auto; height: 400px; width: 1146px ...
Python数据可视化 Pyecharts 制作 Timeline 时间轴组件
Python3 的 Pyecharts 制作 Timeline(时间轴组件) 时需要使用的设置参数和常用模板案例,可根据实际情况对案例中的内容进行调整即可. 文章目录 Demo 时间轴&轴饼图 ...
html改变复选框颜色,如何利用纯CSS改变html？radio/checkbox默认背景颜色样式
本篇文章给大家带来的内容是关于如何利用纯CSS改变html?radio/checkbox默认背景颜色样式,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. CSS代码:input[typ ...

纯CSS简单实现漂亮的timeline时间轴效果(样式1)

背景

效果图

实现原理

源码

纯CSS简单实现漂亮的timeline时间轴效果(样式1)相关推荐

最新文章

热门文章