修改首屏加载动画

index.html

@@ -4,18 +4,18 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <style>
-      .loader{position:fixed;top:50%;left:50%;-webkit-transform:translateX(-50%) translateY(-50%);width:75px;height:100px}.loader__bar{position:absolute;bottom:0;width:10px;height:50%;background:#2db5ab;-webkit-transform-origin:center bottom;transform-origin:center bottom;box-shadow:1px 1px 0 rgba(0,0,0,.2)}.loader__bar:nth-child(1){left:0;-webkit-transform:scale(1,.2);transform:scale(1,.2);-webkit-animation:barUp1 4s infinite;animation:barUp1 4s infinite}.loader__bar:nth-child(2){left:15px;-webkit-transform:scale(1,.4);transform:scale(1,.4);-webkit-animation:barUp2 4s infinite;animation:barUp2 4s infinite}.loader__bar:nth-child(3){left:30px;-webkit-transform:scale(1,.6);transform:scale(1,.6);-webkit-animation:barUp3 4s infinite;animation:barUp3 4s infinite}.loader__bar:nth-child(4){left:45px;-webkit-transform:scale(1,.8);transform:scale(1,.8);-webkit-animation:barUp4 4s infinite;animation:barUp4 4s infinite}.loader__bar:nth-child(5){left:60px;-webkit-transform:scale(1,1);transform:scale(1,1);-webkit-animation:barUp5 4s infinite;animation:barUp5 4s infinite}.loader__ball{position:absolute;bottom:10px;left:0;width:10px;height:10px;background:#2db5ab;border-radius:50%;-webkit-animation:ball 4s infinite;animation:ball 4s infinite}@-webkit-keyframes ball{0%{-webkit-transform:translate(0,0);transform:translate(0,0)}5%{-webkit-transform:translate(8px,-14px);transform:translate(8px,-14px)}10%{-webkit-transform:translate(15px,-10px);transform:translate(15px,-10px)}17%{-webkit-transform:translate(23px,-24px);transform:translate(23px,-24px)}20%{-webkit-transform:translate(30px,-20px);transform:translate(30px,-20px)}27%{-webkit-transform:translate(38px,-34px);transform:translate(38px,-34px)}30%{-webkit-transform:translate(45px,-30px);transform:translate(45px,-30px)}37%{-webkit-transform:translate(53px,-44px);transform:translate(53px,-44px)}40%{-webkit-transform:translate(60px,-40px);transform:translate(60px,-40px)}50%{-webkit-transform:translate(60px,0);transform:translate(60px,0)}57%{-webkit-transform:translate(53px,-14px);transform:translate(53px,-14px)}60%{-webkit-transform:translate(45px,-10px);transform:translate(45px,-10px)}67%{-webkit-transform:translate(37px,-24px);transform:translate(37px,-24px)}70%{-webkit-transform:translate(30px,-20px);transform:translate(30px,-20px)}77%{-webkit-transform:translate(22px,-34px);transform:translate(22px,-34px)}80%{-webkit-transform:translate(15px,-30px);transform:translate(15px,-30px)}87%{-webkit-transform:translate(7px,-44px);transform:translate(7px,-44px)}90%{-webkit-transform:translate(0,-40px);transform:translate(0,-40px)}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}@keyframes ball{0%{-webkit-transform:translate(0,0);transform:translate(0,0)}5%{-webkit-transform:translate(8px,-14px);transform:translate(8px,-14px)}10%{-webkit-transform:translate(15px,-10px);transform:translate(15px,-10px)}17%{-webkit-transform:translate(23px,-24px);transform:translate(23px,-24px)}20%{-webkit-transform:translate(30px,-20px);transform:translate(30px,-20px)}27%{-webkit-transform:translate(38px,-34px);transform:translate(38px,-34px)}30%{-webkit-transform:translate(45px,-30px);transform:translate(45px,-30px)}37%{-webkit-transform:translate(53px,-44px);transform:translate(53px,-44px)}40%{-webkit-transform:translate(60px,-40px);transform:translate(60px,-40px)}50%{-webkit-transform:translate(60px,0);transform:translate(60px,0)}57%{-webkit-transform:translate(53px,-14px);transform:translate(53px,-14px)}60%{-webkit-transform:translate(45px,-10px);transform:translate(45px,-10px)}67%{-webkit-transform:translate(37px,-24px);transform:translate(37px,-24px)}70%{-webkit-transform:translate(30px,-20px);transform:translate(30px,-20px)}77%{-webkit-transform:translate(22px,-34px);transform:translate(22px,-34px)}80%{-webkit-transform:translate(15px,-30px);transform:translate(15px,-30px)}87%{-webkit-transform:translate(7px,-44px);transform:translate(7px,-44px)}90%{-webkit-transform:translate(0,-40px);transform:translate(0,-40px)}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}@-webkit-keyframes barUp1{0%{-webkit-transform:scale(1,.2);transform:scale(1,.2)}40%{-webkit-transform:scale(1,.2);transform:scale(1,.2)}50%{-webkit-transform:scale(1,1);transform:scale(1,1)}90%{-webkit-transform:scale(1,1);transform:scale(1,1)}100%{-webkit-transform:scale(1,.2);transform:scale(1,.2)}}@keyframes barUp1{0%{-webkit-transform:scale(1,.2);transform:scale(1,.2)}40%{-webkit-transform:scale(1,.2);transform:scale(1,.2)}50%{-webkit-transform:scale(1,1);transform:scale(1,1)}90%{-webkit-transform:scale(1,1);transform:scale(1,1)}100%{-webkit-transform:scale(1,.2);transform:scale(1,.2)}}@-webkit-keyframes barUp2{0%{-webkit-transform:scale(1,.4);transform:scale(1,.4)}40%{-webkit-transform:scale(1,.4);transform:scale(1,.4)}50%{-webkit-transform:scale(1,.8);transform:scale(1,.8)}90%{-webkit-transform:scale(1,.8);transform:scale(1,.8)}100%{-webkit-transform:scale(1,.4);transform:scale(1,.4)}}@keyframes barUp2{0%{-webkit-transform:scale(1,.4);transform:scale(1,.4)}40%{-webkit-transform:scale(1,.4);transform:scale(1,.4)}50%{-webkit-transform:scale(1,.8);transform:scale(1,.8)}90%{-webkit-transform:scale(1,.8);transform:scale(1,.8)}100%{-webkit-transform:scale(1,.4);transform:scale(1,.4)}}@-webkit-keyframes barUp3{0%{-webkit-transform:scale(1,.6);transform:scale(1,.6)}100%{-webkit-transform:scale(1,.6);transform:scale(1,.6)}}@keyframes barUp3{0%{-webkit-transform:scale(1,.6);transform:scale(1,.6)}100%{-webkit-transform:scale(1,.6);transform:scale(1,.6)}}@-webkit-keyframes barUp4{0%{-webkit-transform:scale(1,.8);transform:scale(1,.8)}40%{-webkit-transform:scale(1,.8);transform:scale(1,.8)}50%{-webkit-transform:scale(1,.4);transform:scale(1,.4)}90%{-webkit-transform:scale(1,.4);transform:scale(1,.4)}100%{-webkit-transform:scale(1,.8);transform:scale(1,.8)}}@keyframes barUp4{0%{-webkit-transform:scale(1,.8);transform:scale(1,.8)}40%{-webkit-transform:scale(1,.8);transform:scale(1,.8)}50%{-webkit-transform:scale(1,.4);transform:scale(1,.4)}90%{-webkit-transform:scale(1,.4);transform:scale(1,.4)}100%{-webkit-transform:scale(1,.8);transform:scale(1,.8)}}@-webkit-keyframes barUp5{0%{-webkit-transform:scale(1,1);transform:scale(1,1)}40%{-webkit-transform:scale(1,1);transform:scale(1,1)}50%{-webkit-transform:scale(1,.2);transform:scale(1,.2)}90%{-webkit-transform:scale(1,.2);transform:scale(1,.2)}100%{-webkit-transform:scale(1,1);transform:scale(1,1)}}@keyframes barUp5{0%{-webkit-transform:scale(1,1);transform:scale(1,1)}40%{-webkit-transform:scale(1,1);transform:scale(1,1)}50%{-webkit-transform:scale(1,.2);transform:scale(1,.2)}90%{-webkit-transform:scale(1,.2);transform:scale(1,.2)}100%{-webkit-transform:scale(1,1);transform:scale(1,1)}}
+      .sampleContainer{position:fixed;top:50%;left:50%;-webkit-transform:translateX(-50%) translateY(-50%);width:75px;height:100px}.loader{position:relative;width:44px;height:8px;margin:12px auto}.dot{display:inline-block;width:8px;height:8px;border-radius:4px;background:#ccc;position:absolute}.dot_1{animation:animateDot1 1.5s linear infinite;left:12px;background:#e579b8}.dot_2{animation:animateDot2 1.5s linear infinite;animation-delay:.5s;left:24px}.dot_3{animation:animateDot3 1.5s linear infinite;left:12px}.dot_4{animation:animateDot4 1.5s linear infinite;animation-delay:.5s;left:24px}@keyframes animateDot1{0%{transform:rotate(0) translateX(-12px)}25%{transform:rotate(180deg) translateX(-12px)}75%{transform:rotate(180deg) translateX(-12px)}100%{transform:rotate(360deg) translateX(-12px)}}@keyframes animateDot2{0%{transform:rotate(0) translateX(-12px)}25%{transform:rotate(-180deg) translateX(-12px)}75%{transform:rotate(-180deg) translateX(-12px)}100%{transform:rotate(-360deg) translateX(-12px)}}@keyframes animateDot3{0%{transform:rotate(0) translateX(12px)}25%{transform:rotate(180deg) translateX(12px)}75%{transform:rotate(180deg) translateX(12px)}100%{transform:rotate(360deg) translateX(12px)}}@keyframes animateDot4{0%{transform:rotate(0) translateX(12px)}25%{transform:rotate(-180deg) translateX(12px)}75%{transform:rotate(-180deg) translateX(12px)}100%{transform:rotate(-360deg) translateX(12px)}}
     </style>
   </head>
   <body>
     <div id="app">
+      <div class="sampleContainer">
         <div class="loader">
-        <div class="loader__bar"></div>
-        <div class="loader__bar"></div>
-        <div class="loader__bar"></div>
-        <div class="loader__bar"></div>
-        <div class="loader__bar"></div>
-        <div class="loader__ball"></div>
+          <span class="dot dot_1"></span>
+          <span class="dot dot_2"></span>
+          <span class="dot dot_3"></span>
+          <span class="dot dot_4"></span>
+        </div>
       </div>
     </div>
   </body>