特别感谢
https://www.lingtings.com/demo/html/2017/09/13/18_time_axis/
效果
CSS实现思路及注意事项
:nth-child(even)
、:nth-child(odd)
选择器,实现对奇偶数元素样式的批量设置。- .
margin-left: 50%;
,使用百分数。 position: abusolute;
,使用绝对定位调整位置。- 时间轴的轴线、文字气泡的箭头部分,可使用
::before
或::after
伪元素实现。 - 主体文字部分不可使用绝对定位,否则全部脱离文档流,无法撑开最外层box。
代码
HTML部分
<body>
<div class="con">
<h2 class="title">周杰伦作品集</h2>
<div class="timeline-con">
<div class="timeline-post">
<div class="timeline-date">2000</div>
<div class="timeline-icon-con">
<div class="timeline-icon">
<div class="timeline-icon-inner"></div>
</div>
</div>
<div class="timeline-content">
<h3>Jay</h3>
<p>
由周杰伦制作、作曲,方文山、徐若瑄等人作词,收录了10首歌曲,2000年11月7日发行 ,2001年,该专辑获得台湾金曲奖最佳流行音乐演唱专辑奖、IFPI香港唱片销量大奖十大销量国语唱片等奖项。
</p>
</div>
</div>
<div class="timeline-post">
<div class="timeline-date">2001</div>
<div class="timeline-icon-con">
<div class="timeline-icon">
<div class="timeline-icon-inner"></div>
</div>
</div>
<div class="timeline-content">
<h3>范特西</h3>
<p>
共收录10首歌曲。该专辑的制作人由周杰伦担任。2002年,该专辑获得第十三届金曲奖颁奖礼最佳流行音乐专辑奖、新加坡金曲奖年度最畅销专辑等奖项。周杰伦凭借该专辑获得第十三届金曲奖颁奖最佳专辑制作人奖、第二届全球华语歌曲排行榜颁奖礼最佳制作人等奖项。
</p>
</div>
</div>
<div class="timeline-post">
<div class="timeline-date">2002</div>
<div class="timeline-icon-con">
<div class="timeline-icon">
<div class="timeline-icon-inner"></div>
</div>
</div>
<div class="timeline-content">
<h3>八度空间</h3>
<p>
由周杰伦作曲并担任制作人,方文山、许世昌、刘耕宏、周杰伦作词。专辑于2002年7月18日发行,共收录10首歌曲。
</p>
</div>
</div>
<div class="timeline-post">
<div class="timeline-date">2003</div>
<div class="timeline-icon-con">
<div class="timeline-icon">
<div class="timeline-icon-inner"></div>
</div>
</div>
<div class="timeline-content">
<h3>叶惠美</h3>
<p>
共收录了11首歌曲。专辑的制作人由周杰伦担任。2004年,该专辑获得了第15届金曲奖最佳流行音乐演唱专辑奖、新城国语力颁奖礼新城国语力亚洲大碟奖、第四届全球华语歌曲排行榜颁奖典礼年度最受欢迎专辑奖。
</p>
</div>
</div>
<div class="timeline-post">
<div class="timeline-date">2004</div>
<div class="timeline-icon-con">
<div class="timeline-icon">
<div class="timeline-icon-inner"></div>
</div>
</div>
<div class="timeline-content">
<h3>七里香</h3>
<p>
该专辑的制作人由周杰伦担任,共收录了10首歌曲。2005年,该专辑获得第16届台湾金曲奖年度最佳专辑提名、HITO流行音乐奖年度DJ最爱专辑等奖项。
</p>
</div>
</div>
</div>
</div>
</body>
CSS部分
<style>
* {
padding: 0;
margin: 0;
}
body {
font-family:'Courier New', Courier, monospace, sans-serif;
}
.con {
width: 1000px;
margin: 0 auto;
}
.title {
text-align: center;
font-size: 24px;
color: #333;
margin-top: 50px;
text-align: center;
}
.timeline-con {
position: relative;
margin: 100px 30px;
position: relative;
}
.timeline-con::before {
content: '';
display: block;
width: 1px;
height: 100%;
background: linear-gradient(#feeeed , #f05b72, #feeeed);
background: -webkit-linear-gradient(#feeeed , #f05b72, #feeeed);
background: -o-linear-gradient(#feeeed , #f05b72, #feeeed);
background: -moz-linear-gradient(#feeeed , #f05b72, #feeeed);
position: absolute;
left: 50%;
top: 0;
}
.timeline-post {
width: 50%;
margin-left: 50%;
margin-bottom: 60px;
}
.timeline-post:nth-child(even) {
margin-left: 0;
}
.timeline-date {
font-size: 20px;
font-weight: bold;
color: #666;
position: absolute;
right: 50%;
margin-top: 15px;
margin-right: 24px;
}
.timeline-post:nth-child(even) .timeline-date {
left: 50%;
margin-left: 24px;
}
.timeline-icon-con {
width: 38px;
height: 50px;
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
left: 50%;
margin-left: -18px;
}
.timeline-icon {
width: 16px;
height: 16px;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border: 3px solid #d93a49;
}
.timeline-content {
position: relative;
top: -6px;
font-size: 18px;
color: #666;
line-height: 36px;
margin: 0 0 0 44px;
padding: 15px 16px 20px;
background-color: #ffeeed;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
}
.timeline-post:nth-child(even) .timeline-content {
margin: 0 44px 0 0;
text-align: right;
}
.timeline-post:nth-child(odd) .timeline-content::before {
content: '';
display: inline-block;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-right: 16px solid #ffeeed;
border-bottom: 8px solid transparent;
border-left: 16px solid transparent;
position: absolute;
top: 22px;
left: -30px;
}
.timeline-post:nth-child(even) .timeline-content::after {
content: '';
display: inline-block;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-right: 16px solid transparent;
border-bottom: 8px solid transparent;
border-left: 16px solid #ffeeed;
position: absolute;
top: 22px;
right: -30px;
}
.timeline-content h3 {
font-size: 18px;
color: #f05b72;
}
.timeline-content p {
margin-top: 0;
}
</style>