2015-04-13

CSS3 Animation 套用 CSS 3 動畫語法範本,就讓網站輕鬆動起來

以前想要讓網頁有動畫效果,多數要靠 JaveScript、GIF 或是 Flash,而現在則可以透過 CSS 3,不過想要透過 CSS 3 語法來做動態特效,其學習門檻著實不低。但若只想在網頁放一些較為簡單的特效,可以來參考 CSS3 Animation 這個網站所提供的 CSS 3 動畫語法免費範本,包含有兩大類:
  • ENTRANCES :slideUp、slideDown、slideLeft、slideRight、slideExpandUp、expandUp、fadeIn、expandOpen、bigEntrance、hatch
  • MISC:bounce、pulse、floating、tossing、pullUp、pullDown、stretchLeft、stretchRight
下載後,只要經過簡單的語法加工,就能套用範本,讓自己的網頁輕鬆動起來。

CSS3 Animation 網站資訊

網站語言:英文網站網址: 按我前往 CSS3 Animation

如何使用 CSS3 Animation 所提供的 CSS 3 動畫語法?

1.使用瀏覽器進入 CSS3 Animation ,可以先點擊綠色的特效按鈕來體驗各種效果,接下來按網頁右上角的[ download ]來下載。
CSS3 Animation 套用 CSS 3 動畫語法範本,就讓網站輕鬆動起來

2.開啟要引入特效的網頁,在<head></head>之間加入 <link rel="stylesheet" href="animations.css">
CSS3 Animation 套用 CSS 3 動畫語法範本,就讓網站輕鬆動起來

3.效果。
CSS3 Animation 套用 CSS 3 動畫語法範本,就讓網站輕鬆動起來


按我前往展示頁面 (請用 Ggoogle Chrome 瀏覽器)

 分享您的留言


請輸入關鍵字


請選擇...


˄