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
        }
        
        .box ul li > span:before,.box ul li > span:after{
            content: "";
            display: block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background:#ff6d6d;
            border:2px solid #fff;
            position: absolute;
            left:-7.5px
        }
        
        .box ul li > span:before{top:-10px}
        .box ul li > span:after{top:95%}
        
        .box .title{
            text-transform: uppercase;
            font-weight: 700;
            margin-bottom: 5px
        }
        
        .box .info:first-letter{text-transform: capitalize;line-height: 1.7}
        
        .box .name{
            margin-top: 10px;
            text-transform: capitalize;
            font-style: italic;
            text-align: right;
            margin-right: 20px
        }
        
        
        .box .time span{
            position: absolute;
.........完整代码请登录后点击上方下载按钮下载查看