css 動畫 (2)
阿新 • • 發佈：2022-03-26
1. 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>Keyframes 02</title> </head> <body> <div class="box"></div> </body> </html>
2. css 樣式
body { background-color: #333; } .box { background-color: #fff; width: 200px; height: 200px; position: relative; top: 0; left: 0; animation: anim 2s forwards ease-in-out; } @keyframes anim {25% { top: 0; left: 300px; background-color: cornflowerblue; border-radius: 50% 0 0 0; } 50% { top: 300px; left: 300px; background-color: brown; border-radius: 50% 50% 0 0; } 75% { top: 300px; left: 0; background-color: blueviolet; border-radius: 50% 50% 50% 0; } 100% { top: 0; left: 0; background-color: aqua; border-radius: 50%; } }