<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <!-- animation:動畫效果屬性 “關鍵幀”（@keyframes），它的樣式規則是由多個百分比構成的，比如“0%”到“100%”之間，加上不同的屬性，從而讓元素達到一種不斷變化的效果。語法規則如下： @keyframes 動畫名稱{ 0%{元素狀態} ... 100%{元素狀態} } animation屬性： animation-name：@keyframes動畫的名稱 animation-duration：動畫完成一個周期所花費的時間，默認是0 animation-timing-function：動畫的速度曲線（緩動效果）。默認是“ease” animation-delay:動畫開始的延遲時間，默認是0 animation-iteration-count：動畫被播放的次數。默認是1 animation-direction：動畫是否在下一周期逆向的播放。默認是“normal” animation-play-state:動畫是否存在運行或暫停，默認是“running” animation-fill-mode：對象動畫時間之外的狀態 --> <style> .box{ height: 100px; width: 100px; margin:50px auto; background-color: #f00 } .box:hover{ /* 綁定動畫名稱，設置完成周期1s，設置速度曲線加速，設置延遲時間0，設置播放次數無限,循環逆向播放*/ animation: hover 1s ease-in 0s infinite alternate; } @keyframes hover{ 0%{width: 100px;height: 100px;border-radius: 50%;} 50%{width: 200px;height: 200px;border-radius: 50%;} 100%{width: 100px;height: 100px;border-radius: 50%;} } </style> } <style> </style> <body> <div class="box"></div> </body> </html>
Document
}