zoukankan      html  css  js  c++  java
  • CSS animation动画loading

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>logging</title>
        <style>
            @keyframes beat{
                70%{
                    transform: scale(1,1);
                }
                100%{
                    transform: scale(1.3,1.3);
                }
            }
            body{
                margin: 0;
                padding: 0;
                background: #000;
            }
            .box{
                width: 400px;
                height: 450px;
                /*border: 2px solid #000;*/
                margin: 150px auto 0;
                text-align: center;
    
            }
    
            .box div{
                float: left;
                width: 10px;
                height: 60px;
                margin: 50px 20px 50px;
                border-radius: 3px;
                border: 1px solid rgba(255,237,151,0.3);
                animation: beat 500ms linear 0s infinite alternate;
                background: #fff;
            }
            .box div:nth-child(1){
                animation-delay: 100ms;
            }
            .box div:nth-child(2){
                animation-delay: 200ms;
            }
            .box div:nth-child(3){
                animation-delay: 300ms;
            }
            .box div:nth-child(4){
                animation-delay: 400ms;
            }
            .box div:nth-child(5){
                animation-delay: 500ms;
            }
            .box div:nth-child(6){
                animation-delay: 600ms;
            }
            .box div:nth-child(7){
                animation-delay: 700ms;
            }
            
    
        </style>
    </head>
    <body>
        <div class="box">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
    
            <!-- <p>Loading</p> -->
        </div>
    </body>
    </html>
  • 相关阅读:
    数据库自动备份(转)
    sqlserver常用全局变量
    Remoting通讯实例
    自定义ORM框架(转转)
    带格式导出数据到Excel
    app.config动态修改及读取
    学习笔记之AJAX无刷新分页
    游标(转转)
    Sql Server索引(转载)
    流Stream个人学习理解
  • 原文地址:https://www.cnblogs.com/jrri/p/11346940.html
Copyright © 2011-2022 走看看