js+svg实现可滚动垂直时间线效果代码-html代码-BFW代码库

js+svg实现可滚动垂直时间线效果代码

代码语言：html

所属分类：其他

代码描述：js+svg实现可滚动垂直时间线效果代码

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

<html>

<head>
    <style>
        body{
            margin: 0;
            padding: 0;
            background-color:#ff6d6d;
            font-family: arial
        }
        
        .box{
            margin:0 10%;
            height: 630px;
            overflow: hidden;
            padding: 10px 0 40px 60px
        }
        
        .box ul{
            list-style-type: none;
            margin: 0;
            padding: 0;
            position: relative;
            transition: all 0.5s linear;
            top:0
        }
        
        .box ul:last-of-type{top:80px}
        
        .box ul:before{
            content: "";
            display: block;
            width: 0;
            height: 100%;
            border:1px dashed #fff;
            position: absolute;
            top:0;
            left:30px
        }
        
        .box ul li{
            margin: 20px 60px 60px;
            position: relative;
            padding: 10px 20px;
            background:rgba(255, 255, 255, 0.3);
            color:#fff;
            border-radius: 10px;
            line-height: 20px;
            width: 35%
        }
        
        
        .box ul li > span{
            content: "";
            display: block;
            width: 0;
            height: 100%;
            border:1px solid #fff;
            position: absolute;
            top:0;
            left:-30px
      .........完整代码请登录后点击上方下载按钮下载查看