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);
                }
            }
  • 相关阅读:
    微信公众平台回复音乐
    Else is very important
    Generate source code from wsdl
    PHP Simple HTML DOM Parser: check elements with multiple classes
    Get Version is the first function is called?
    Remote debug GWT UI
    Remote Debug For Java Application On Tomcat
    SetStyleName引起的Regression Issue
    做乘法运算的时候需要考虑越界问题
    MySQL Uniall All
  • 原文地址:https://www.cnblogs.com/djdliu/p/6120929.html
Copyright © 2011-2022 走看看