【前端攻城獅之路】CSS3動畫
阿新 • • 發佈：2019-01-22
昨晚看了w3school的CSS3動畫屬性，發現演示動畫很有意思，就仿製了一個類似的來玩，對於提高自己的CSS學習積極性很有幫助哈哈哈哈哈~
·今天又發現了記事本開啟導致文字譯碼錯誤的BUG，正在苦思冥想解決中。。。
程式碼附上，如下，很簡單~~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文件</title> <style type="text/css"> div{ width:200px; height:130px; background-color:red; padding:20px; text-align:center; font-size:18px; font-family:"幼圓"; /*設定動畫及播放時間*/ animation:myfirst 5s; /*設定動畫輪播次數*/ animation-iteration-count:100; } /*規定動畫效果*/ @keyframes myfirst{ 0%{ background-color:#F33; margin-left:0; margin-top:0; font-size:18px; transform:rotate(-30deg); } 25%{ background-color:yellow; margin-left:200px; margin-top:0; font-size:26px; /*順時針旋轉45度*/ transform:rotate(30deg); } 50%{ background-color:#06F; margin-left:200px; margin-top:200px; font-size:18px; transform:rotate(-30deg); } 75%{ background-color:#0C0; margin-left:0; margin-top:200px; font-size:26px; transform:rotate(30deg); } 100%{ background-color:#F33; margin-left:0; margin-top:0; font-size:18px; transform:rotate(-30deg); } </style> </head> <body> <div class="testdiv"> 這個盒子會動哇 </div> </body> </html>