网页中时光轴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> （编辑：焦作站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
