animate.css是一款非常流行的CSS動畫庫,使用方便,支持動態加載動畫效果。它可以為網頁添加各種動畫效果,例如淡入淡出、彈跳、旋轉等,并且可以通過添加CSS類名來觸發這些效果。
以下是animate.css的一些實例,展示了如何使用它來添加動畫效果:
// 點擊按鈕時,讓元素淡入淡出 $("#btn").click(function() { $("#element").addClass("animated fadeOut"); }); // 鼠標經過元素時,讓元素抖動一下 $("#element").hover(function() { $(this).addClass("animated shake"); }); // 加載頁面時,讓元素從左滑入 $(document).ready(function() { $("#element").addClass("animated slideInLeft"); });
這些實例只是動畫效果的基本應用,animate.css支持更多豐富多彩的效果,反應在CSS類名上,可以直接在官網中查看 animate.css 的 API 獲得更加多樣化的動畫效果。