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

代码语言：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;
    }
    .timeline-box:nth-child(3)
    {
        left: 300px;
    }
    .timeline-box:nth-child(4)
    {
        left: 445px;
    }
    .timeline-box:nth-child(5)
    {
        left: 595px;
    }
    .timeline-box:nth-child(6)
    {
        left: 742px;
    }
    .timeline-box:nth-child(7)
    {
        left: 886px;
    }
    .timeline-box:nth-child(8)
    {
        left: 1036px;
    }
    .header{
        width: 70px;
        height: 70px;
    
        position: absolute;
        left: 50%;
       
        margin-left: -35px;
       
        display: flex;
        justify-content: center;
        text-anchor: middle;
        background-color: #FFF;
        padding:10px;
        border-radius: 50%;;
        box-sizing: border-box;
    
    }
    
    .timeline-box:nth-child(odd) .header{
        top: -35px;
    }
    .timeline-box:nth-child(even) .header{
         bottom: -35px;
    }
    .header::before{
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        
        border-radius: 50%;;
        box-shadow: 0 0 5px 2px rgba(135,135,135, 0.15);
        z-index: -2;
    }
    .header img{
        width: 100%;
        height: 100%;
        border-radius: 50%;
        transition: 0.5s;
    }
    
    
    .timeline_div{
        width: 1050px; 
        height: 90px; 
        position: absolute;
    
    
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        
        margin: auto;
        display: flex;
        justify-content: space-between;
        
    }
    .timeline_div div{
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #ffae12;
        border: 5px solid #f6f6f6;
    
    }
    
    .f-border{
    
        border-color: #fff;
        box-shadow: 0 0 8px rgba(0, 0, 0, .2);
    
    }
    .active{
    
       border:5px;
       border-color: #fff;
       box-shadow: 0 0 10px 3px #ffae12;
    }
    </style>


</head>

<body>

    <div id="timeline">

        <div class="timecenter">

            <div class="timeline-box">
                <div class="header"><img src="//repo.bfw.wiki/bfwrepo/image/5d6539613d08b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90"></div>
                <h3>标题信息</h3>
                <p>正文内容</p>
                <p>说明</p>
                <p>相信信息介绍</p>
            </div>

            <div class="timeline-box">
                <div class="header"><img src="//repo.bfw.wiki/bfwrepo/image/5d653a6a2aea8.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90"></div>
                <h3>标题信息</h3>
                <p>正文内容</p>
                <p>说明</p>
                <p>相信信息介绍</p>
            </div>

            <div class="timeline-box">
                <div class="header"><img src="//repo.bfw.wiki/bfwrepo/image/5d65ea7d8bc8b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90"></div>
                <h3>标题信息</h3>
                <p>正文内容</p>
                <p>说明</p>
                <p>相信信息介绍</p>
            </div>

            <div class="timeline-box">
                <div class="header"><img src="//repo.bfw.wiki/bfwrepo/image/5d65399a14ba1.png?x-oss-proce.........完整代码请登录后点击上方下载按钮下载查看