纯CSS简单实现漂亮的timeline时间轴效果（样式1）
背景
最近需要⽤到timle效果，⽹上提供很多案例都加了很多特效，代码也⽐较复杂。最终到了⼀个样式精美，代码简洁的timeline效果。我简单分享⼀下实现原理，并配上代码，供⼤家参考。
效果图
实现原理
右侧列表是ul > li * n的列表布局，该布局的样式完全是⾃⼰定义，和timeline实现⽆关
实现过程拆分起来很简单
1. 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;borderbox
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 . {
background-color: lightseagreen; border: 3px solid #B0E8E2;
}
.timeline-small-body .bullet.blue {
background-color: aquamarine;
border: 3px solid cadetblue;
}
.timeline-small-body .ange { 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>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论