zoukankan      html  css  js  c++  java
  • css3波浪形loading动画

    css3做个第一个动画,主要点在box-shadow和background的变化,虽然不难,但是还是有一定的技巧性的!备注下

    html

    <div class="loading">
        <div class="show_01 show"></div>
        <div class="show_02 show"></div>
        <div class="show_03 show"></div>
        <div class="show_04 show"></div>
        <div class="show_05 show"></div>
    </div>
    .loading{ width: 100%; height: 100%; background: #014a9c; position: relative;}
            .show{ width: 50px; height: 50px; border-radius: 100%; position: absolute; left: 50%; top: 50%; margin-top: -25px; margin-left: -25px; animation:sploosh 4s ease-in-out both infinite; -webkit-animation:sploosh 4s ease-in-out both infinite; );
                background: rgba(66, 166, 223, 0.7);}
            .show_02{ -webkit-animation-delay: -0.8s;  animation-delay: -0.8s;}
            .show_03{ -webkit-animation-delay: -1.6s;  animation-delay: -1.6s;}
            .show_04{ -webkit-animation-delay: -2.4s;  animation-delay: -2.4s;}
            .show_05{ -webkit-animation-delay: -3.2s;  animation-delay: -3.2s;}
    
            @-webkit-keyframes sploosh {
                0% {
                    box-shadow: 0 0 0 0 rgba(66, 166, 223, 0.7);
                    background: rgba(66, 166, 223, 0.7);
                }
                100% {
                    box-shadow: 0 0 0 250px rgba(66, 166, 223, 0);
                    background: rgba(66, 166, 223, 0);
                }
            }
            @keyframes sploosh {
                0% {
                    box-shadow: 0 0 0 0 rgba(66, 166, 223, 0.7);
                    background: rgba(66, 166, 223, 0.7);
                }
                100% {
                    box-shadow: 0 0 0 250px rgba(66, 166, 223, 0);
                    background: rgba(66, 166, 223, 0);
                }
            }
  • 相关阅读:
    Vue 面试题汇总
    SSIS 通过OData源连接Dynamic 365 Online
    SQL Server AlwaysOn
    SQL Server AlwaysOn
    SQL Server AlwaysOn
    SQL Server AlwaysOn
    OGG同步ORACLE至SQLSERVER(转)
    Power BI Online管理数据源
    SSRS 动态设置分组依据及行组个数
    查看Reporting Services服务器中用户查询报表历史记录
  • 原文地址:https://www.cnblogs.com/djdliu/p/6120929.html
Copyright © 2011-2022 走看看