如下，最近在工作中遇到实现时间线效果的需求，用纯css即可实现，下面给出详细实现代码。
html：
<div class="time_line_list_wrap hide">
<ul class="time_line">
<li>
<div class="time_line_item_wrap">
<span class="time">00:00:00</span>
</div>
</li>
<li class="time_line_item_tmpl">
<div class="time_line_item_wrap">
<span class="time"></span>
<div class="time_item_contain_wrap">
<img class="ppt_item_img_left">
<div class="item_contain_right">
<p class="ppt_name">中文课件名称超过了一定长度的字之后隐藏</p>
<span class="item_page_number">2/30</span>
</div>
</div>
</div>
</li>
</ul>
</div>
css:（此处用的less语法）
.time_line_list_wrap{
width: 100%;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
background-color: #ffffff;
padding:;
flex-grow:;
.time_line{
padding: 16px 10px 0px 10px;
li{
list-style-type: none;
position: relative;
width: 2px;
height: 102px;
background-color: #e6e6e6;
&.time_line_item_tmpl{
display: none;
}
&:last-child{
height: 0px;
}
&:first-child{
height: 30px;
}
&:before{
content: '';
position: absolute;
left: 50%;
top:;
transform: translateX(-50%);
width: 8px;
height: 8px;
border-radius: 50%;
background: inherit;
}
.time_line_item_wrap {
width: 280px;
margin-left: 10px;
position: relative;
bottom: 6px;
&:last-child{
margin-bottom: 20px;
}
&:first-child{
margin-bottom: 0px;
}
.time{
display: inline-block;
width: 92px;
height: 20px;
line-height: 20px;
font-size: 12px;
color: #4a90e2;
box-sizing: border-box;
padding-left: 10px;
}
.time_item_contain_wrap{
display: flex;
padding: 10px 0 10px 9px;
.ppt_item_img_left{
width: 80px;
height: 62px;
object-fit: contain;
flex-shrink:;
}
.item_contain_right{
font-size: 12px;
color: #696969;
font-weight:;
margin-left: 8px;
width: 68%;
.ppt_name{
.text-autocut();
}
}
}
}
}
}
&.hide{
display: none;
}
}
js：
const $timeLineUl = $('.time_line')
const $timeLineItemTmpl = $('.time_line_item_tmpl').clone().removeClass('time_line_item_tmpl')
// 初始化侧边栏中时间线数据
for (let i = 0; i < slideInfo.length; i += 1) {
const currentSlide = slideInfo[i]
const $timeLineItem = $timeLineItemTmpl.clone()
$timeLineItem.find('.time').text(formatTime(currentSlide.recordTime / 1000).join(':'))
$timeLineItem.find('.time').css({
background: `url(${triangleTimeStr}) no-repeat center`,
})
$timeLineItem.find('.ppt_item_img_left').attr('src', currentSlide.slideUrl)
$timeLineItem.find('.ppt_name').text(currentSlide.slideName)
$timeLineItem.find('.item_page_number').text(`${currentSlide.currentPageNumber}/${currentSlide.totalPageNumber}`)
$timeLineUl.append($timeLineItem)
}
注意此处，需要用find()方法来查找后代元素，.children()方法是查找直接后代（儿子辈）的元素，.find()方法是查找所有后代元素（包括儿子、孙子、孙子的孙子及更多）。