1.效果预览
2.实现步骤
建立时间轴的整个div结构
<div class="memorial_day"> 外层盒子 <div class="time_axis"></div> 动画时间轴 <ul> <li class="n1"> 节点信息 <a href="#">初识计算机</a> <div class="dataview">2015-09</div> </li> <li class="n2"> <a href="#">加入实验室</a> <div class="dataview">2016-06</div> </li> <li class="n3"> <a href="#">接触HTML</a> <div class="dataview">2017-09</div> </li> <li class="n4"> <a href="#">完成第一个blog</a> <div class="dataview">2018-01</div> </li> </ul> </div>添加基础样式(可选)
* {margin: 0;padding: 0;} body {font: 14px "微软雅黑", Arial, Helvetica, sans-serif;} ul, li { list-style: none; } a:link, a:visited, a:active { text-decoration: none;} a:hover {text-decoration: none;}定义外层盒子样式
.memorial_day { width:840px; overflow: hidden; position: relative; /*因为有个子元素要用absolute*/ padding:60px; }定义时间轴样式+动画
.time_axis { background: #e9f5fb; height: 6px; width: 100%; -webkit-animation: time_a 5s; /*定义动画名字以及播放时间*/ -moz-animation: time_a 5s; -o-animation: time_a 5s; animation: time_a 5s; } /*因为只写了四个事件,所以我这里分成了四个事件段*/ @keyframes time_a { 0% { width:0px; } 25% { width:250px; } 50% { width:500px; } 100% { width:840px; } /*总长度和外盒子一样长*/ } @-webkit-keyframes time_a { 0% { width:0px; } 25% { width:250px; } 50% { width:500px; } 100% { width:840px; } } @-moz-keyframes time_a { 0% { width:0px; } 25% { width:250px; } 50% { width:500px; } 100% { width:840px; } } @-o-keyframes time_a { 0% { width:0px; } 25% { width:250px; } 50% { width:500px; } 100% { width:840px; } }定义对话框里时间的样式
.dataview { position:absolute; top:-50px; /*位置不好掌握的话,可以完成后面的再来调整,总之在时间轴之上*/ left:20px; background:url(images/dtime.png) no-repeat;/*图片资源就在下面*/ color:#fff; height:46px; width:88px; line-height:30px; text-align: center; }
定义时间轴上的事件
.memorial_day ul li a { margin-top:30px; display:block; color:#000; }
定义伪类元素(时间轴上的时间节点)
.memorial_day ul li::before { content: ""; width: 14px; height: 14px; border-radius: 50%; position: absolute; /*这里一定要绝对定位,让节点圆圈钉在li的左上角*/ background: #0979b1; border: 3px solid #e9f6fb; } .memorial_day ul li:hover::before { background: #075498; border: 3px solid #e9f6fb; }分别固定不同事件在时间轴上的位置
.memorial_day ul li.n1 { position: absolute; top: 54px; left: 90px; } .memorial_day ul li.n2 { position:absolute; top:54px; left:250px; } .memorial_day ul li.n3 { position:absolute; top:54px; left:500px; /*建议中间的事件的位置和上面定义动画的不同位置重合,感觉更好看*/ } .memorial_day ul li.n4 { position:absolute; top:54px; left:840px; }完成>.<