网页中时光轴CSS实现

网页制作发布日期：2024/12/24 浏览次数：1

正在浏览：网页中时光轴CSS实现

本文实例为大家分享了网页中时光轴的制作方法，供大家参考，具体内容如下

效果图：

实现代码：

XML/HTML Code复制内容到剪贴板

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>时光轴</title>
<style>
.container {
width: 800px;
margin: 50px auto;
}
.vertical-timeline {
color: #FFF;
font-family: "微软雅黑", "Microsoft YaHei";
}
.vertical-timeline-block {
width: 100%;
border-left: 2px solid #DDD;
margin: 0 20px;
position: relative;
padding-bottom: 30px;
}
/* 时间轴的左侧图标 */
.vertical-timeline-icon {
width: 40px;
height: 40px;
border-radius: 20px;
position: absolute;
left: -22px;
top: 10px;
text-align: center;
line-height: 40px;
cursor: pointer;
transition: all 0.2s ease-in;
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
}
.vertical-timeline-block {
cursor: pointer;
}
.vertical-timeline-block:hover .vertical-timeline-icon {
width: 50px;
height: 50px;
border-radius: 25px;
line-height: 50px;
left: -27px;
box-shadow: 0 0 5px #CCC;
font-size: 25px;
}
/* 时间轴的左侧图标的各种样式 */
.v-timeline-icon1 {
background-color: #2aabd2;
}
.v-timeline-icon2 {
background-color: #5cb85c;
}
.v-timeline-icon3 {
background-color: #8c8c8c;
}
/* 时间轴的左侧图标上的序号*/
.vertical-timeline-icon i {
font-style: normal;
color: #FFF;
}
/* 时间轴上的具体内容 */
.vertical-timeline-content {
background-color: #5bc0de;
margin-left: 60px;
padding: 20px 30px;
border-radius: 5px;
position: relative;
}
/* 时间轴上的具体内容左侧箭头 */
.vertical-timeline-content:before {
content: '';
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid #5bc0de;
border-left: 10px solid transparent;
position: absolute;
right: 100%;
top: 20px;
}
/* 时间轴的具体内容的格式 */
.timeline-content {
text-indent: 2em;
}
.time-more {
overflow: hidden;
}
.time-more .time {
float: left;
line-height: 40px;
display: inline-block;
}
.time-more .more {
float: right;
}
.time-more .more a {
display: inline-block;
height: 20px;
padding: 8px 15px;
color: #FFF;
text-decoration: none;
font-size: 15px;
}
/* “更多信息”的风格 */
.more-style1 {
border-radius: 5px;
background-color: #565656;
}
.more-style1:hover {
background-color: #696969;
}
.more-style2 {
border-radius: 5px;
background-color: #1AB394;
}
.more-style2:hover {
background-color: #18A689;
}
.more-style3 {
border-radius: 5px;
background-color: #1C84C6;
}
.more-style3:hover {
background-color: #1A7BB9;
}
</style>
</head>
<body>
<div class="container">
<div class="vertical-timeline">
<div class="vertical-timeline-block">
<div class="vertical-timeline-icon v-timeline-icon1">
<i class="icon">1</i>
</div>
<div class="vertical-timeline-content">
<h2>时间点1</h2>
<p class="timeline-content">我去吃了个午饭</p>
<p class="time-more">
<span class="time">2016/4/30 13:48</span>
<span class="more more-style1"><a href="#">更多信息</a></span>
</p>
</div>
</div>
<div class="vertical-timeline-block">
<div class="vertical-timeline-icon v-timeline-icon2">
<i class="icon">2</i>
</div>
<div class="vertical-timeline-content">
<h2>时间点2</h2>
<p class="timeline-content">我去吃了个午饭</p>
<p class="time-more">
<span class="time">2016/4/30 13:48</span>
<span class="more more-style2"><a href="#">更多信息</a></span>
</p>
</div>
</div>
<div class="vertical-timeline-block">
<div class="vertical-timeline-icon v-timeline-icon3">
<i class="icon">3</i>
</div>
<div class="vertical-timeline-content">
<h2>时间点3</h2>
<p class="timeline-content">我去吃了个午饭</p>
<p class="time-more">
<span class="time">2016/4/30 13:48</span>
<span class="more more-style3"><a href="#">更多信息</a></span>
</p>
</div>
</div>
<div class="vertical-timeline-block">
<div class="vertical-timeline-icon v-timeline-icon1">
<i class="icon">4</i>
</div>
<div class="vertical-timeline-content">
<h2>时间点1</h2>
<h2>时间点1</h2>
<h2>时间点1</h2>
<h2>时间点1</h2>
</div>
</div>
<div class="vertical-timeline-block">
<div class="vertical-timeline-icon v-timeline-icon2">
<i class="icon">5</i>
</div>
<div class="vertical-timeline-content">
<h2>时间点1</h2>
<h2>时间点1</h2>
<h2>时间点1</h2>
</div>
</div>
<div class="vertical-timeline-block">
<div class="vertical-timeline-icon v-timeline-icon3">
<i class="icon">6</i>
</div>
<div class="vertical-timeline-content">
<h2>时间点1</h2>
<h2>时间点1</h2>
<h2>时间点1</h2>
</div>
</div>
</div>
</div>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助。

上一篇：CSS实现等分布局的4种方式

下一篇：CSS三列布局的多种表现形式