zoukankan      html  css  js  c++  java
  • css3纯手写loading效果

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>圆形旋转loading</title>
            <style type="text/css">
                *{
                    margin: 0;
                    padding: 0;
                }
                .box{
                    width: 50px;
                    height:50px;
                    margin: 100px;
                    position: absolute;
                }
                .box:nth-of-type(2){
                    transform: rotate(45deg);
                }
                .box p{
                    width: 15px;
                    height: 15px;
                    background: #0000FF;
                    border-radius: 50%;
                    position: absolute;
                    animation: run 1.5s infinite linear;
                }
                .box p:nth-of-type(1){ /*左上*/
                    left: 0;
                    top: 0;
                }
                .box p:nth-of-type(2){ /*右上*/
                    right: 0;
                    top: 0;
                }
                .box p:nth-of-type(3){ /*左下*/
                    left: 0;
                    bottom: 0;
                }
                .box p:nth-of-type(4){ /*右下*/
                    right: 0;
                    bottom: 0;
                }
                /*动画效果*/
                @keyframes run{
                    0%{
                        transform: scale(0);
                    }
                    50%{
                        transform: scale(1);
                    }
                    100%{
                        transform: scale(0);
                    }
                }
                /*延迟动画效果   负值是解决蹦动的效果*/
                .box:nth-of-type(1) p:nth-of-type(1){
                    animation-delay: -0.1s;
                }
                .box:nth-of-type(2) p:nth-of-type(1){
                    animation-delay: -0.3s;
                }
                .box:nth-of-type(1) p:nth-of-type(2){
                    animation-delay: -0.5s;
                }
                .box:nth-of-type(2) p:nth-of-type(2){
                    animation-delay: -0.7s;
                }
                .box:nth-of-type(1) p:nth-of-type(3){
                    animation-delay: -0.9s;
                }
                .box:nth-of-type(2) p:nth-of-type(3){
                    animation-delay: -1.1s;
                }
                .box:nth-of-type(1) p:nth-of-type(4){
                    animation-delay: -1.3s;
                }
                .box:nth-of-type(2) p:nth-of-type(4){
                    animation-delay: -1.5s;
                }
            </style>
        </head>
        <body>
            <div class="box">
                <p></p>
                <p></p>
                <p></p>
                <p></p>
            </div>
            <div class="box">
                <p></p>
                <p></p>
                <p></p>
                <p></p>
            </div>
        </body>
    </html>
  • 相关阅读:
    [Python]执行Linux命令
    [Linux]命令返回值以及错误对照表
    [ERROR]pip insall pyodbc
    [CentOS7]安装ODBC Driver 17 for SQL Server
    [Python]获取字典所有值
    [Python]判断变量类型是否为List列表
    十分钟了解pandas
    Docker容器化技术(上)
    C语言位域
    PAT基础级-钻石段位样卷2-7-7 危险品装箱 (25 分)
  • 原文地址:https://www.cnblogs.com/lhl66/p/8975639.html
Copyright © 2011-2022 走看看