服務信箱：sr.design2011@gmail.com搜尋本網站

SR網頁設計工作室 - 購物網站/企業官網專業開發

搜索
SR網頁設計工作室 - 購物網站/企業官網專業開發 › HTML/CSS 語法 › Animate.CSS 讓你輕鬆使用56種 CSS3 動畫特效 ...

[CSS相關] Animate.CSS 讓你輕鬆使用56種 CSS3 動畫特效

byadmin 發表於 2013-5-25 15:19:59 , 21934人已閱讀 , 0人回應
2013-05-25_144559.jpg

Animate.CSS介紹

它是一款集合了56種CSS3動態效果的CSS檔，由Dan Eden所開發。有了這個大集合動畫特輯CSS3檔案 , 可以讓設計師在作網頁設計時，只需透過JQuery 輸入指定動畫名稱，就可以針對版面的任何元素進行動畫的渲染喔 !! 最重要的是 , 設計師不用寫半條CSS語法 (歡呼) , 即可迅速實現效果。大家可以先去Animate.CSS體驗看看它提供的56種動態效果！

Animate.CSS 使用教學

首先去官網下載animate.css，你可以選擇一次下載全部CSS特效 , 也可以任意勾選你要的特效，網站會自動幫你打包程客制化的CSS檔案非常方便。

下載回來之後，要使用第一步先在網頁中呼叫：
  1. <link rel="stylesheet" href="animate-custom.css">
複製代碼
若不使用JQuery來指定的滑鼠觸動事件的話，直接套用在元素上，就變成頁面載入時產生特效，例如：
<div class="animated rotateIn">當網頁載入時，文字就會旋轉</div>

因此，為了增加它的實用性，我們可以使用簡單的JQuery語法，指定自定義的滑鼠事件(移動經過、移出、點擊..等)來產生動畫效果，官網範例中就是利用點擊來產生效果，詳細使用如下：
  1. //先載入JQuery
  2. <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
複製代碼
接著設置滑鼠事件對指定元素產生動畫效果
  1. <script>
  2. $(function(){
  3.          $("自定義ID或Class1").click(function(){
  4.                 $("自定義ID或Class2").addClass("animated  rotateIn");               
  5.         })
  6. });

  8. </script>
複製代碼
上面簡短的JQuery語法用意是，當點擊了"自定義ID或Class1" 對 "自定義ID或Class2" 產生動畫 !
剩下要如何活用就是靠各位的創意囉
CSS3, Animate, Jquery, CSS3, Jquery

相關帖子

收藏回覆 只看該作者 道具 舉報

返回列表
Traffic Exchange Site
高級模式
B Color Image Link Quote Code Smilies
您需要登錄後才可以回帖 登錄 | 立即註冊

作者資訊

admin

文章分類

Contact us

歡迎您使用以下方式聯繫我們 , 本工作室服務時間為每日早上10:00點至晚間7:30點 ,也可點選下方 Contact us 進入留言板留下您的問題與相關聯絡資訊 , 我們將會儘快了解與回覆您。

SR數位設計工作室

  • 服務專線：03-3555-069


ECSHOP購物網站開發|接案說明|線上洽詢|隱私權政策|SR數位設計(CMS)

信箱：sr.design2011@gmail.com

本網站推薦使用以下瀏覽器 (請點擊圖式下載)

, Processed in 0.087375 second(s), 43 queries , Gzip On.

Copyright © 2011-2014 Template By SR網頁設計清新部落風格

Core - DZ2.5　GMT+8, 2024-11-21 19:47

回頂部