loding ... 样式操作

作者: 鬼会画符 | 来源:发表于2018-10-25 20:05 被阅读0次

loding ... 样式操作
jQuery 样式操作
jQuery操作样式与属性
jquery的样式操作及属性操作
jQuery 属性、样式操作
WebAPI（二）
jQuery元素的操作
jQuery中的样式操作
loding...
JS常用API合集-CSS篇


<!DOCTYPE html>
<html>
<head>
    <title>loding</title>
    <meta charset="utf-8">
    <style type="text/css" >
        *{
            margin:0;
            padding:0;
        }
        .z{
            margin:auto;
            margin-top:100px;
            width: 326px;
            height: 154px;
            background-color:beige;
        }
        .zz{
            margin-top:12px;
            margin-left: 12px; 
            width: 301px;
            height: 125px;
            border:1px solid black;
            float: left;
        }
        .zx{
            width: 301px;
            height: 100px;
            list-style: none;
            background-color:white;
        }
        .zx>li{
            width: 30px;
            height: 36px;
            margin-top:32px;
            margin-left: 15px;
            margin-right:15px;
            border-radius: 20%;
            float: left;
        }
        
        .zx1{
            background-color:red;
            animation: a 0.5s ease 100ms infinite alternate;
            
        }
        .zx2{
            background-color:yellow;
            animation: a 0.5s ease 300ms infinite alternate;
            
        }        
        .zx3{
            background-color:blue;
            animation: a 0.5s ease 500ms infinite alternate;
                 /*name 动画完成时间 运动曲线 延时 重复 轮流反方向播放  */
            
        }
        .zx4{
            background-color:green;
            animation: a 0.5s ease 700ms infinite alternate;

        }
        .zx5{
            background-color:khaki;
            animation: a 0.5s ease 900ms infinite alternate;

        }
        @keyframes a{
            0%{
                
            }
            
            100%{
                transform:scale(1.2,1.5);
            }
            }
        .zy{
            width: 301px;
            height: 23px;
            font-size:16px;
            padding-top:2px;
            text-align:center;
            background-color:white;
            }

    </style>
</head>
<body>
    <div class="z">
        <div class="zz">
            <div class="zx">
                <li class="zx1"></li>
                <li class="zx2"></li>
                <li class="zx3"></li>
                <li class="zx4"></li>
                <li class="zx5"></li>
            </div>
            <div class="zy">loding ...</div>
        </div>
    </div>
</body>
</html>