css3 파도형 loading 애니메이션

6117 단어
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

좋은 웹페이지 즐겨찾기