网页中时光轴CSS实现

网页制作 2025/11/4 佚名

3 2 1

杰网资源 Design By www.escxy.com

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

效果图：

实现代码：

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,时光轴

标签：

css,时光轴

杰网资源 Design By www.escxy.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

杰网资源 Design By www.escxy.com

评论“网页中时光轴CSS实现”

暂无评论...

网页中时光轴CSS实现

css,时光轴

CSS实现等分布局的4种方式

CSS三列布局的多种表现形式

评论“网页中时光轴CSS实现”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

友情链接