如何实现CSS网页的时光轴效果
2019-08-14 09:38:36来源:爱站网 阅读 ()
如何实现网页中的时光轴效果?时光轴可以记录每个时间段、时间点所发生的事情,以下内容是css网页中时光轴的实现方法,感兴趣的朋友们来看看吧。
效果图:
实现代码:
- <!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>??
以上就是本文的全部内容,希望对大家的学习有所帮助。
原文链接:https://js.aizhan.com/web_authoring/css/6186.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- DIV居中的经典方法 2020-06-13
- CSS中的float和margin的混合使用 2020-06-11
- Html/css 列表项 区分列表首尾 2020-06-11
- css与javascript重难点,学前端,基础不好一切白费! 2020-06-11
- ie8下透明度处理 2020-06-11
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash