zoukankan html css js c++ java

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

<!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

查看全文

相关阅读:
ASP.NET MVC 实现二级域名(泛域名)
linq to sql 语句基本查询（3）：Select和Count/Sum/Min/Max/Avg
DataSet用法详细
 MVC中返回Json的几种声明方式
 利用索引提高SQL Server数据处理的效率
 嫁给以下十种男人的女人离“地狱”就不远了
 Thinkpad x200 X201拆机换风扇教程实图
 笔记一则
 冬季谨防胃病复发放松精神吃温热食物
 就是这样给X200加内存的（申精）

原文地址：https://www.cnblogs.com/dongxiaolei/p/6721410.html

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

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