css+js实现时间线从左向右依次显示动画效果代码-html代码-BFW代码库

css+js实现时间线从左向右依次显示动画效果代码

代码语言：html

所属分类：其他

代码描述：css+js实现时间线从左向右依次显示动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <style>
        h3,p{ margin: 0; padding: 0;}
    body{padding: 0; margin: 0;}
    h3{font-size: 18px; font-weight: normal; margin: 15px 0 10px; padding-top: 35px; text-align: center;}
    p{margin-bottom: 5px; font-size: 14px; color: #999; text-align: center;}
    #timeline{
        width: 1200px;
        margin: 50px auto;
    
    }
    .timecenter{
        position: relative;
        display: inline-block;
        height: 600px;
        width: 100%;
    }
    .timeline-box{
       width: 160px;
       height: 190px;
       box-shadow: 0 0 5px 2px rgba(135,135,135, 0.15);
       position: absolute;
       left: 0;
       right: 0;
       background-color: #FFF;
       z-index: 1;
    
       opacity: 0;
       transition: 0.5s;
      
       transform: scaleX(0);
    }
    .timeline-box:nth-child(odd){
        top: 35px;
    }
    .timeline-box:nth-child(even){
        bottom: 35px;
    }
    
    .timeline-box::before{
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: #FFF;
        z-index: -1;
    }
    .timeline-box::after{
        content: "";
        width: 15px;
        height:15px;
        position: absolute;
    
        left: 50%;
        background-color: #FFF;
        transform:translateX(-50%)rotate(45deg);
        box-shadow: 0 0 5px 2px rgba(135,135,135, 0.15);
        z-index: -2;
    
    }
    
    
    
    
    .timeline-box:nth-child(odd)::after{
        bottom:-7.5px;
    }
    .timeline-box:nth-child(even)::after{
        top:-7.5px;
    }
    .timeline-box:nth-child(1)
    {
        left: 5px;
    }
    .timeline-box:nth-child(2)
    {
        left: 150px;
    }
    .........完整代码请登录后点击上方下载按钮下载查看