网页HTML中发展历程CSS样式特效

今天在看一个网站的时候，感觉有一个关于发展历程的前端样式还可以，方便自己后期使用，在这里整理收集一下，以备后用；

发展历程展示样式如下

前端HTML文件

<div class="lc_list">
<ul>
<li class="frt">
<div class="web">
<h3><span></span>2013年</h3>
<p>创始人在学校做人力代理，为自己在大学期间收获了人生中的第一桶金。</p>
</div>
</li>
<li class="flt">
<div class="web">
<h3><span></span>2017年</h3>
<p>毕业后前往沿海城市人力行业的企业就职，从此正式进入人力资源服务行业。</p>
</div>
</li>
<li class="frt">
<div class="web">
<h3><span></span>2018年</h3>
<p>创建了贵州蓝鲸人力，开启了人生的创业之路。</p>
</div>
</li>
<li class="flt">
<div class="web">
<h3><span></span>2020年</h3>
<p>受疫情影响公司业务运作起起伏伏，于是决定暂时修养声息，养精蓄锐，总结经验，为之后整装重新起航做准备。于同年，重新创建贵州旭历人力资源服务有限公司，以崭新的状态和饱满的精神重新进入市场。</p>
</div>
</li>
<li class="frt">
<div class="web">
<h3><span></span>2021年</h3>
<p>规范公司管理，丰富员工文化，优化公司业务，不断寻找与公司价值观匹配的优秀人才，致力打造一批专业优秀的公司队伍，带着员工不断发展。秉承“在其位-专业做事，对客户-用心服务，对团队-责任担当”的核心价值观，帮助更多的求职者就业，帮助企业解决核心问题。</p>
</div>
</li>
<li class="flt">
<div class="web">
<h3><span></span>2022年</h3>
<p>展望未来，未来可期，我们将是最亮的那颗星！</p>
</div>
</li>
</ul>
<div class="clear"></div>
</div>

前端CSS样式文件

.lc_list {
padding: 0 10% 65px;
background: url(../images/icon20.png) repeat-y center top;
margin-top: 65px;
}
.lc_list ul li {
width: 50%;
position: relative;
clear: both;
}
.lc_list ul li.frt .web {
padding-left: 55px;
}
.lc_list ul li.flt .web {
padding-right: 55px;
}
.lc_list ul li h3 {
font-size: 16px;
color: #000;
}
.lc_list ul li.frt h3 {
}
.lc_list ul li.flt h3 {
text-align: right;
}
.lc_list ul li h3 span {
display: block;
width: 16px;
height: 17px;
background: url(../images/icon19.png) no-repeat center center;
position: absolute;
top: 0;
}
.lc_list ul li.frt h3 span {
left: -8px;
}
.lc_list ul li.flt h3 span {
right: -8px;
}
.lc_list ul li p {
font-size: 14px;
line-height: 24px;
color: #282828;
height: 48px;
margin-top: 10px;
}

样式对应的一张图片如下：

2021100919480231