《CSS3 Animate動畫模組》隨套隨用搭配jQuery效果更佳

梅問題-CSS教學-《CSS3動畫模組》隨套隨用搭配jQuery效果更佳
  一般製作網頁的朋友,應該都知道,若要製造一些動態效果,比方淡入淡出、左右晃動、旋轉...等效果,都需使用jQuery來完成,而現在不用這麼麻煩啦!直接透過CSS3就可完成各種動畫特效,其實CSS3也有提供動畫的語法,因此透過CSS也可作到如jQuery般的各種特效,而國外有位朋友,還將這些動畫特效,已整合成一個套件,因此只要直接載入css檔,立即就可使用,完全不用寫任何的程式碼,同時再搭配jQuery輔助,就可作到滑入、滑出套用什麼的動畫效果,現在就一塊來看看吧!

Animate.css(56種動畫特效):
網站名稱:Animate.css
網站作者:Dan Eden
適用瀏覽器:Firxfox、Chrome、Safari、Oprea
動畫特效:56種
下載網址:http://daneden.me/animate/build/

使用方法:
Step1
進到網站,下載完畢後,將解壓縮css檔載入,在<head>~</head>加入css連結。
<link rel="stylesheet" href="animate-custom.css">

Step2
而這隻css檔中,共包含了56種動畫特效,因此可由官網中,直接預覽效果,當有看到喜歡的效果時,在class中加入 animated 空一格 特效名稱,就可以囉!
<div class="animated shake">
當網頁載入時,文字就會左右晃動
</div>

  這一隻CSS3的動畫模組,真的很方便,而從下方的範例中,可看到一個是一載入就出現效果,另一個DIV是搭配jQuery,當滑鼠滑入時才會左右晃動,所以完全不用背任何的語法,也不用寫任何的程式碼,直接加入class名稱,立即就可顯示效果囉!
[範例預覽]

相關文章

「Lazy Load CSS」非同步載入CSS,當網頁使用雲端字型更順暢

「Lazy Load CSS」非同步載入CSS,當網頁使用雲端字型更順暢

CSS3-clip-path繪製不規則形遮色片線上產生器

CSS3-clip-path繪製不規則形遮色片線上產生器

CSS教學-hover滑入圖片時,加入CSS3動畫特效「淡入淡出」變換圖片

CSS教學-hover滑入圖片時,加入CSS3動畫特效「淡入淡出」變換圖片

將ICON Fonts向量圖示字型引用到CSS中(Font Awesome為例)

將ICON Fonts向量圖示字型引用到CSS中(Font Awesome為例)

CSS3動畫hover套件,各種常用的互動特效直接套用

CSS3動畫hover套件,各種常用的互動特效直接套用





回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。

共 1 梅留言

  • 第1梅
    jessica 說道:

    下載網址:http://daneden.me/animate/build/…….無法下載耶??