网页中时光轴CSS实现

时间：2021-05-08

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

效果图：

实现代码：

XML/HTML Code复制内容到剪贴板
  • <!DOCTYPEhtml>
  • <htmllang="en">
  • <head>
  • <metacharset="UTF-8">
  • <title>时光轴</title>
  • <style>
  • .container{
  • width:800px;
  • margin:50pxauto;
  • }
  • .vertical-timeline{
  • color:#FFF;
  • font-family:"微软雅黑","MicrosoftYaHei";
  • }
  • .vertical-timeline-block{
  • width:100%;
  • border-left:2pxsolid#DDD;
  • margin:020px;
  • 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:all0.2sease-in;
  • -webkit-transition:all0.2sease-in;
  • -moz-transition:all0.2sease-in;
  • -o-transition:all0.2sease-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:005px#CCC;
  • font-size:25px;
  • }
  • .v-timeline-icon1{
  • background-color:#2aabd2;
  • }
  • .v-timeline-icon2{
  • background-color:#5cb85c;
  • }
  • .v-timeline-icon3{
  • background-color:#8c8c8c;
  • }
  • .vertical-timeline-iconi{
  • font-style:normal;
  • color:#FFF;
  • }
  • .vertical-timeline-content{
  • background-color:#5bc0de;
  • margin-left:60px;
  • padding:20px30px;
  • border-radius:5px;
  • position:relative;
  • }
  • .vertical-timeline-content:before{
  • content:'';
  • width:0;
  • height:0;
  • border-top:10pxsolidtransparent;
  • border-bottom:10pxsolidtransparent;
  • border-right:10pxsolid#5bc0de;
  • border-left:10pxsolidtransparent;
  • 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.morea{
  • display:inline-block;
  • height:20px;
  • padding:8px15px;
  • 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>
  • <divclass="container">
  • <divclass="vertical-timeline">
  • <divclass="vertical-timeline-block">
  • <divclass="vertical-timeline-iconv-timeline-icon1">
  • <iclass="icon">1</i>
  • </div>
  • <divclass="vertical-timeline-content">
  • <h2>时间点1</h2>
  • <pclass="timeline-content">我去吃了个午饭</p>
  • <pclass="time-more">
  • <spanclass="time">2016/4/3013:48</span>
  • <spanclass="moremore-style1"><ahref="#">更多信息</a></span>
  • </p>
  • </div>
  • </div>
  • <divclass="vertical-timeline-block">
  • <divclass="vertical-timeline-iconv-timeline-icon2">
  • <iclass="icon">2</i>
  • </div>
  • <divclass="vertical-timeline-content">
  • <h2>时间点2</h2>
  • <pclass="timeline-content">我去吃了个午饭</p>
  • <pclass="time-more">
  • <spanclass="time">2016/4/3013:48</span>
  • <spanclass="moremore-style2"><ahref="#">更多信息</a></span>
  • </p>
  • </div>
  • </div>
  • <divclass="vertical-timeline-block">
  • <divclass="vertical-timeline-iconv-timeline-icon3">
  • <iclass="icon">3</i>
  • </div>
  • <divclass="vertical-timeline-content">
  • <h2>时间点3</h2>
  • <pclass="timeline-content">我去吃了个午饭</p>
  • <pclass="time-more">
  • <spanclass="time">2016/4/3013:48</span>
  • <spanclass="moremore-style3"><ahref="#">更多信息</a></span>
  • </p>
  • </div>
  • </div>
  • <divclass="vertical-timeline-block">
  • <divclass="vertical-timeline-iconv-timeline-icon1">
  • <iclass="icon">4</i>
  • </div>
  • <divclass="vertical-timeline-content">
  • <h2>时间点1</h2>
  • <h2>时间点1</h2>
  • <h2>时间点1</h2>
  • <h2>时间点1</h2>
  • </div>
  • </div>
  • <divclass="vertical-timeline-block">
  • <divclass="vertical-timeline-iconv-timeline-icon2">
  • <iclass="icon">5</i>
  • </div>
  • <divclass="vertical-timeline-content">
  • <h2>时间点1</h2>
  • <h2>时间点1</h2>
  • <h2>时间点1</h2>
  • </div>
  • </div>
  • <divclass="vertical-timeline-block">
  • <divclass="vertical-timeline-iconv-timeline-icon3">
  • <iclass="icon">6</i>
  • </div>
  • <divclass="vertical-timeline-content">
  • <h2>时间点1</h2>
  • <h2>时间点1</h2>
  • <h2>时间点1</h2>
  • </div>
  • </div>
  • </div>
  • </div>
  • </body>
  • </html>

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

    声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

    相关文章