html+css3實現簡單載入動畫，loading實現
阿新 • • 發佈：2019-01-03
animation：用於使用動畫
animation屬性描述
原始碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>loading...</title> <style> @keyframes loading { from { opacity: 1; transform: translateY(0); } to { opacity: 0.1; transform: translateY(-2rem); } } .loading { display: flex; justify-content: center; height: 300px; background: #f2f2f2; align-items: center; } .loading>div { width: 33px; height: 33px; border-radius: 50%; background: #8385aa; opacity: .5; margin: 20px; color: #fff; text-align: center; line-height: 33px; font-size: 1.5rem; animation: loading 0.8s infinite alternate; } .loading>div:nth-child(2) { animation-delay: 0.4s } .loading>div:nth-child(3) { animation-delay: 0.6s; } </style> </head> <body> <div class="loading"> <div> </div> <div> </div> <div> </div> </div> </body> </html>