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

            }

        }

css3波浪形loading动画的相关教程结束。