《CSS3 Animation》CSS3動畫套件,讓網站動起來超EZ!

梅問題-《CSS3 Animation》CSS3動畫套件讓網站動起來!
  上周清明連假四天,梅干正好趁著這個放假期間,把樂兔米大改版,除了把頁面改成了自適應外,也加入了一些CSS3的動態效果,讓畫面有些變化,看起來比較活潑些,而有寫過CSS3動畫的朋友都知道,要寫一堆的碼,同時還要設定動畫的時間,光是CSS碼都比javascript還來的多,其實各位看到的這些動畫特效,完全不用寫到任何的CSS的碼,只要把特效類別加入html標籤後,立即就會產生出各種的動態的效果,而這些CSS3的動態效果,其實只是一個套件,且網路上也有不少的相關的資源,而今天要來分享一個,梅干覺得還不錯的CSS3動態效果的特效「CSS3 Animation Cheat Sheet」。

CSS3 Animation Cheat Sheet:
網站名稱:CSS3 Animation Cheat Sheet
網站網址:http://www.justinaguilar.com/animations/
特效清單:
/* ENTRANCES */
slideUp
slideDown
slideLeft
slideRight
slideExpandUp
expandUp
fadeIn
expandOpen
bigEntrance
hatch

/* MISC */
bounce
pulse
floating
tossing
pullUp
pullDown
stretchLeft
stretchRight

Step1
這是CSS3 Animation Cheat Sheet所有的動畫的效果的標籤,因此只要記住這些標籤,就可讓你的網站動起來啦!
梅問題-《CSS3 Animation》CSS3動畫套件讓網站動起來!
Step2
首先,先按右上角的DWONLOAD鈕,將套件下載回來,再把animations.css引用到網頁中。
加到<head>~</head>間:
<link rel="stylesheet" href="animations.css">

Step3
當要套用特效時,只要在class後加入特效名稱就可以了。
梅問題-《CSS3 Animation》CSS3動畫套件讓網站動起來!
Step4
這時再開啟網頁後,就會有動態效果啦!是不是超EZ的呀!
梅問題-《CSS3 Animation》CSS3動畫套件讓網站動起來!
[範例預覽] [範例下載]

相關文章

CSS教學-CSS選擇器套用樣式的優先權順序

CSS教學-CSS選擇器套用樣式的優先權順序

Retina高解析網頁圖片怎麼透過CSS3 media設定,讓Apple官網告訴你

Retina高解析網頁圖片怎麼透過CSS3 media設定,讓Apple官網告訴你

「CSS3:target選擇器」免程式!純CSS就可實現Tab頁籤式的互動切換

「CSS3:target選擇器」免程式!純CSS就可實現Tab頁籤式的互動切換

利用CSS3偽類選擇器:checked,實作出Toggle開合選單效果

利用CSS3偽類選擇器:checked,實作出Toggle開合選單效果

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

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





回應本篇 »

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

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

近期講座

近期講座

更多講座