簡易loading動畫的製作
阿新 • • 發佈:2021-01-10
實現效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>簡易載入動畫</title> <style> body{ display: flex; flex-direction: column; justify-content: center; align-items: center; } div { width: 100px; height: 100px; border-radius: 100px; border-width: 10px; border-color: orange orange transparent orange; border-style: solid; animation: spin 1s infinite linear; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } </style> </head> <body> <h3>簡易載入動畫</h3> <div></div> </body> </html>