## 三種loading特效 ### 效果一  >html代碼 ``` <div class="box"> <div class="loader"> <div class="loading-1"> <i></i> <i></i> <i></i> </div> </di <!-- (另外兩個也在該box內) --> </box> ``` >css代碼 ``` .box { width: 100%; padding: 3%; box-sizing: border-box; overflow: hidden; } .box .loader { width: 30%; float: left; height: 200px; margin-right: 3%; border: 1px solid #ccc; box-sizing: border-box; display: flex; align-items: center; justify-content: center; } .loading-1 { width: 60px; height: 60px; position: relative; } .loading-1 i { display: block; width: 60px; height: 60px; border-radius: 50%; background-color: #333; position: absolute; left: 0; top: 0; opacity: 0; } .loading-1 i:nth-child(1) { animation: loading-1 1s linear 0s infinite; } .loading-1 i:nth-child(2) { animation: loading-1 1s linear 0.2s infinite; } .loading-1 i:nth-child(3) { animation: loading-1 1s linear 0.4s infinite; } @keyframes loading-1 { 0% { transform: scale(0); opacity: 0; } 50% { opacity: 1; } 100% { transform: scale(1); opacity: 0; } } ``` ### 效果二  >html代碼 ``` <div class="loader"> <div class="loading-2"> <i></i> <i></i> </div> </div> ``` >css代碼 ``` .loading-2 { width: 40px; height: 40px; position: relative; } .loading-2 i { display: block; border: 2px solid #333; border-color: transparent #333; border-radius: 50%; position: absolute; } .loading-2 i:first-child { width: 35px; height: 35px; top: 0; left: 0; animation: loading-2 .8s ease-in-out 0s infinite; } .loading-2 i:last-child { width: 15px; height: 15px; top: 10px; left: 10px; animation: loading-2 .8s ease-in-out 0s infinite reverse; } @keyframes loading-2 { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(0.6); } 100% { transform: rotate(360deg) scale(1); } } ``` ### 效果三  >html代碼 ``` <div class="loader"> <div class="loading-3"> <i></i> <i></i> <i></i> <i></i> <i></i> </div> </div> ``` >css代碼 ``` .loading-3 { width: 80px; height: 20px; position: relative; } .loading-3 i { display: block; width: 20px; height: 20px; border-radius: 50%; background-color: #333; margin-right: 10px; position: absolute; } .loading-3 i:nth-child(1) { animation: loading-3 2s linear 0s infinite; } .loading-3 i:nth-child(2) { animation: loading-3 2s linear -0.4s infinite; } .loading-3 i:nth-child(3) { animation: loading-3 2s linear -0.8s infinite; } .loading-3 i:nth-child(4) { animation: loading-3 2s linear -1.2s infinite; } .loading-3 i:nth-child(5) { animation: loading-3 2s linear -1.6s infinite; } @keyframes loading-3 { 0% { left: 100px; top: 0; } 80% { left: 0; top: 0; } 85% { left: 0; top: -20px; width: 20px; height: 20px; } 90% { width: 40px; height: 20px; } 95% { left: 100px; top: -20px; width: 20px; height: 20px; } 100% { left: 100px; top: 0; } } ``` ---- 整個demo以上傳至[github](https://github.com/MrXuxu/H5_demo/tree/master/loading%E5%8A%A8%E7%94%BB)