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);
            }
        }

 

转载于:https://www.cnblogs.com/djdliu/p/6120929.html