css3:animation实现时间轴动画

1.效果预览
css3:animation实现时间轴动画_第1张图片
2.实现步骤

建立时间轴的整个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;
        }
完成>.<





你可能感兴趣的:(web前端)