載入動畫 dot_two_three_four_points_and_dot_circle
阿新 • • 發佈:2020-07-24
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <style> body { margin: 0; padding: 0; width: 100vw; height: 100vh; background-color: #323232; display: flex; justify-content: center; align-items: center; } .container { display: flex; justify-content: center; align-items: center; width: 100vw; height: 300px; background-color: #efefef; } .loading { font-size: 0; } .dot { position: absolute; display: inline-block; width: 10px; height: 10px; margin: 5px; border-radius: 50%; background-color: tomato; } #dot_one { background-color: rgb(247, 125, 103); animation: dot_circle 2s infinite; animation-delay: -0.s; } #dot_two { background-color: rgb(70, 219, 145); animation: dot_circle 2s infinite; animation-delay: -0.4s; } #dot_three { background-color: rgb(209, 102, 191); animation: dot_circle 2s infinite; animation-delay: -0.6s; } #dot_four { background-color: rgb(58, 106, 196); animation: dot_circle 2s infinite; animation-delay: -0.8s; } #dot_five { background-color: rgb(255, 71, 71); animation: dot_circle 2s infinite; animation-delay: -1s; } @keyframes dot_circle { /* two-points-trace */ /* 0% { transform: translate(-30px, 0); } 50% { transform: translate(30px, 0); } 100% { transform: translate(-30px, 0); } */ /* three-points-trace */ /* 0% { transform: translate(30px, 0); } 33% { transform: translate(0, 51.96px); } 66% { transform: translate(-30px, 0); } 100% { transform: translate(30px, 0); } */ /* four-points-trace */ /* 0% { transform: translate(30px, 0); } 25% { transform: translate(30px, 60px); } 45% { transform: translate(-30px, 60px); } 75% { transform: translate(-30px, 0); } 100% { transform: translate(30px, 0); } */ 0% { transform: rotate(0deg) translate(-30px) rotate(0deg); } 100% { transform: rotate(360deg) translate(-30px) rotate(-360deg); } } </style> <section> <div class="container"> <div class="loading"> <div class="dot" id="dot_one"></div> <div class="dot" id="dot_two"></div> <div class="dot" id="dot_three"></div> <div class="dot" id="dot_four"></div> <div class="dot" id="dot_five"></div> </div> </div> </section> </body> </html>