Error message

Notice: Undefined offset: 1 in counter_get_browser() (line 70 of /volume1/librarythings/www/sites/all/modules/counter/counter.lib.inc).

Animate CSS

Categories : 

CSS真的是一個很強大的工具(其實我也不知道該不該稱他為工具) 可以讓你統一管理網站的樣式 現在,還可以讓你的網站的文字或圖片,可以有一些簡單的動態效果喔! 不用花大把的心力去製作一個FLASH的檔案 使用簡單的Animate CSS,便可以輕鬆的幫你的網站加分與製造一些特別的效果!

Step1 下載Animate CSS


網址:http://daneden.github.io/animate.css 或者你可以直接點選下載網址 下載網址: https://raw.github.com/daneden/animate.css/master/animate.css

Step2 選擇你要的特效


使用下拉選單,尋找你想要的特效 你可以使用Animate it,來反覆執行

Step3 使用於html中


1.在<head></head>之間加入CSS連結網址

<link rel="stylesheet" href="animate.css">

2.在DIV標籤中,輸入animate css的class,例如:你選擇的動態CSS是slideInDown,並在之前加上animated,即animated slideInDown,可以看下面的範例。

<div class="animated slideInDown"><img src="img/name.png" border="0" alt="logo" /></div>

Step4 測試


加入想要的動態效果後,就可以來測試一下,是不是在每個瀏覽器中都可以正常運作 如果在比較舊版本的IE瀏覽器中,無法正常運作,可以嘗試加入一句,可能可以讓你的動態效果成功的顯現喔

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

 

Read more about: