animate.css 是一個 CSS 動畫庫,其中包含了許多預定義的動畫效果,供我們在網頁開發(fā)中使用。其中,字體動畫效果也是 animate.css 中的一種,可以運用在標題、按鈕、標簽等元素上,為網頁增添生動的效果。
h1.animated{ animation-duration: 3s; animation-delay: 1s; animation-name: bounceIn; animation-fill-mode: both; }
通過以上代碼,我們可以讓頁面中的 h1 元素在進入頁面后,延遲一秒鐘后以 bounceIn 的動畫效果彈跳入場。除此之外,animate.css 中還有很多其他的字體動畫效果,以下是其中幾個例子:
h1.animated{ animation-name: bounceOut; } h1.animated{ animation-name: fadeIn; } h1.animated{ animation-name: flipOutX; } h1.animated{ animation-name: rubberBand; }
以上代碼分別演示了字體彈跳消失、淡入淡出、X 軸翻轉消失、彈性縮放等字體動畫效果。通過在元素中添加 animated 和對應的動畫名稱,我們就可以輕松實現這些動畫效果。