代碼來自頭條號"前端小智", 侵權刪html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>氣泡loading</title> <style> *{ margin: 0; padding: 0; box-sizing: border-box; } body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #111; } .container{ display: flex; justify-content: center; align-items: center; flex-direction: column; } .box{ /* 氣泡的父級元素 */ position: relative; width: 200px; height: 200px; animation: rotateBox 10s linear infinite; /*這塊的旋轉動畫,有跟沒有沒看出來區別*/ } @keyframes rotateBox { 0%{ transform: rotate(0deg); } 100%{ transform: rotate((360deg)) } } .circle{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: #38c1ff; border-radius: 50%; animation: animation_1 5s linear infinite; } .circle:nth-child(2){ background-color: #ff3378; animation-delay: -2.5s; /*延遲第二個圓的動畫 以便將兩個圓分開*/ } @keyframes animation_1{ /*氣泡的動畫 設置變形-scale屬性(變大 變小) 和變化的原點 */ 0% { transform: scale(1); transform-origin: left; } 50% { transform: scale(0); transform-origin: left; } 50.01% { transform: scale(0); transform-origin: right; } 100% { transform: scale(1); transform-origin: right; } } h2{ margin-top: 20px; font-size: 20px; font-weight: 400; letter-spacing: 4px; color: #fff; } </style> </head> <body> <div class="container"> <div class="box"> <div class="circle"></div> <div class="circle"></div> </div> <h2>loading</h2> </div> </body> </html>