一個很low的 動畫載入效果（keyframes ）
阿新 • • 發佈：2018-12-29
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <style> div { max-width:60px; max-height:60px; border-radius:50%; box-shadow:0 0 0 10px rgba(255, 0 ,0 ,0.3); position:absolute; margin:auto; top:0; bottom:0; left:0; right:0; animation:mymove 1.5s infinite; } @keyframes mymove{ 0%{ width:10px; height:10px; } 10%{ width:20px; height:20px; } 20%{ width:30px; height:30px; } 30%{ width:40px; height:40px; } 40%{ width:50px; height:50px; } 50%{ width:60px; height:60px; } 60%{ width:50px; height:50px; } 70%{ width:40px; height:40px; } 80%{ width:30px; height:30px; } 90%{ width:20px; height:20px; } 100%{ width:10px; height:10px; } } @-webkit-keyframes mymove /* Safari and Chrome */ { from {top:0px;} to {top:200px;} } </style> </head> <body> <p><strong>注意:</strong> @keyframes 規則 不相容 IE 9 以及更早版本的瀏覽器.</p> <div></div> </body> </html>