仿海棠学院 动态效果（点） 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin:0;
            padding:0;
            box-sizing:border-box;
        }
        body{
            background:#000;
            animation:act 0.5s linear;
            -webkit-animation:act 0.5s linear;
        }
        .center{
           width:200px;
           padding:20px;
           margin:20px auto;
        }
        .box{
            width:100%;
            height:100px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .box div{
            position:relative;
            width:5px;
            height:5px;;
            background:#fff;
            border-radius:50%;
        }
        .box div:first-child{
            width:15px;
            height:15px;
            left:0;
        }
        .box div:nth-child(2){
            left:20%;
        }
        .box div:nth-child(3){
            left:40%;
        }
        .box div:nth-child(4){
            left:60%;
        }
        .box div:nth-child(5){
            left:80%;
        }
        .box:nth-child(2n){
            transform: scaleX(-1);
            -webkit-transform: scaleX(-1);
        }
        @keyframes act{
            0%{
                margin-left:-30px;
                margin-top:-20px;
            }
            10%{
                margin-left:-20px;
                margin-top:-10px;
            }
            30%{
                margin-left:0;
                margin-top:0;
            }
            60%{
                margin-left:-30px;
                margin-top:-20px;
            }
            80%{
                margin-left:-20px;
                margin-top:-10px;
            }
            100%{
                margin-left:0;
                margin-top:0;
            }
        }
        .box div.active{
            box-shadow: 0 0 10px #6aeff8;
            background: #6aeff8;
            transform: scale(2.5);
            -webkit-transform: scale(2.5);
        }
        @keyframes point{
            0%{
                transform:scale(0)
            }
            50%{
                transform:scale(1.4);
            }
            100%{
                transform:scale(1);
                background:#19decd;
            }
        }
    </style>
</head>
<body>
    <div class="center">
        <div class="box">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div class="box">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div class="box">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div class="box">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div class="box">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div class="box">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</body>
<script src="js/jquery-1.11.3.min.js"></script>
<script>
    $(function(){
        var $div=$(".center .box div");
        $div.each(function(i,item){
            var $this=$(this);
            setTimeout(function(){
                $this.addClass("active").siblings().removeClass("active");
                if(i % 5 == 0){
                    $this.parents(".box").siblings().children().removeClass("active");
                }
                if(i == ($div.length - 1)){
                    setTimeout(function(){
                        $div.removeClass("active");
                    },120);
                }
            },140*i+1000)
        });
    })
</script>
</html>
View Code

 

posted @ 2017-04-17 09:38  dongxiaolei  阅读(178)  评论(0)    收藏  举报