Animate.css是一個使用CSS3技術創建的動畫效果庫,它提供了大量的CSS動畫效果,讓網頁的展現更加生動有趣。其中放大縮小效果是非常受歡迎的一種效果。
/* HTML代碼 *//* CSS代碼 */ .box { width: 100px; height: 100px; background-color: #ccc; } /* 放大縮小效果 */ .zoomIn { animation-name: zoomIn; animation-duration: 1s; } @keyframes zoomIn { from { transform: scale(0); } to { transform: scale(1); } }
上面的代碼中,通過添加zoomIn類名實現了放大縮小效果。它使用了CSS3的動畫技術,定義了一個名稱為zoomIn的動畫,持續時間為1秒,通過關鍵幀from和to來定義不同時間點的樣式,從而實現縮小到消失再放大到原來大小的動畫效果。
使用Animate.css就可以實現各種炫酷的動畫效果,為網頁增加更多的視覺體驗。同時,它也提供了豐富的配置選項,方便開發者進行自定義設置,滿足不同的需求。快來嘗試吧!
上一篇1.5倍行高 css