CSS3動畫中心放大是一種常見的網頁動態效果,它能夠吸引用戶的注意力并豐富網頁的視覺效果。在CSS3中,可以通過transform屬性和關鍵幀動畫(@keyframes)實現中心放大效果。
.example { position: relative; animation: zoom-in-out 2s infinite; } @keyframes zoom-in-out { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } }
如上面的代碼所示,我們可以通過設置元素的position屬性為relative,讓該元素相對于其父容器定位。隨后,我們定義一個關鍵幀動畫zoom-in-out,它分別在0%、50%和100%的時間點分別對該元素進行縮放。在50%的時間點,我們將該元素放大10%。最后,我們給該元素賦予動畫效果,使該元素不斷地在原位置進行縮放。
需要注意的是,我們使用了無限次重復動畫(infinite),這可以讓動畫無限地循環播放。如果我們只想讓動畫播放一次,可以將infinite改為1即可。
除了對元素的縮放,還可以對元素的旋轉、位移等屬性進行調整,創造更多樣化的動態效果。在學習過程中,可以多做實驗,探索CSS3動畫的更多奧秘。
上一篇css3動畫 永久