• 純 CSS3 實現(xiàn)的云彩動畫飄動效果
• 非常逼真實用

1. 將 body 中的代碼部分拷貝到你的頁面中
2. 引入對應(yīng)的 CSS 文件即可

• 純 CSS3 實現(xiàn)的鼠標(biāo)懸停動畫效果，各種炫酷動畫，用戶體驗非常好

1. 將 CSS 代碼引入到你的網(wǎng)頁中
2. 將 body 中的代碼部分拷貝到你的頁面中

• 純 CSS3 實現(xiàn)的動畫遮罩效果
• 當(dāng)鼠標(biāo)懸停在圖片上，會從右上角一個沿著逆時針方向旋轉(zhuǎn)過來的動畫效果
• 鼠標(biāo)移走后遮罩復(fù)位

1. 將 CSS 樣式拷貝過去
2. 將 ?index.html? 中的代碼部分拷貝過去即可
   (注意保持文件路徑正確)

純CSS3模擬風(fēng)車轉(zhuǎn)動效果

• 圓形自動旋轉(zhuǎn)，對于 CSS3 來說已經(jīng)是非常常見的功能了
• 一個簡單的 keyframes 即可實現(xiàn)

1. 將 CSS 樣式拷貝過去
2. 將 ?index.html? 中的代碼部分拷貝過去即可
   (注意保持文件路徑正確)

• 這是用純 CSS3 實現(xiàn)的一個旋轉(zhuǎn)動畫效果，模擬游樂場里的摩天輪旋轉(zhuǎn)動畫效果
• 效果逼真好用

1. 引入 css 樣式
2. 將? index.html? 中的代碼部分拷貝過去即可

• 網(wǎng)頁上有時候需要顯示出抖動提示用戶的效果
• 比如鼠標(biāo)懸停在一個按鈕上，按鈕呈現(xiàn)抖動的效果
• 今天給大家推薦的這個就是使用 CSS3 實現(xiàn)的效果
• 當(dāng)你的鼠標(biāo)懸停在按鈕上的時候，按鈕會抖動

1. 將 CSS 樣式復(fù)制到你的頁面中
2. 給需要抖動的按鈕加對應(yīng)的class即可

• 我們在很多網(wǎng)站上看到一些比較漂亮的圖片列表排列效果
• 當(dāng)鼠標(biāo)懸停在任意一個圖片上的時候，會有一些讓人非常舒服的動畫
• 今天推薦一個列表，其中有好多個動畫
• 可以任意挑選一個放到你的網(wǎng)站上，非常不錯

1. 將 CSS 樣式引入到網(wǎng)頁中
2. 將 ?index.html? 中的代碼部分拷貝到你的網(wǎng)頁中

簡單好看的純CSS3翻書效果

• 好久沒有看到如此高逼格的純 CSS3 特效了
• 蠻精致的一款純 CSS3 模擬書本翻頁效果
• 如果看不到效果，建議用最新版的谷歌瀏覽器查看

1. 將 CSS 樣式引入到網(wǎng)頁中
2. 將 ?index.html? 中的代碼部分拷貝到你的網(wǎng)頁中

• 只用 CSS3 實現(xiàn)的圖片翻轉(zhuǎn)動畫效果
• 非常簡單好用，且不需要任何 js 就可以實現(xiàn)
• 對于 js 較若的同學(xué)來說，是非常歡喜的一件事
• 注意：不支持低版本瀏覽器

1. 將 CSS 樣式拷貝到你的網(wǎng)頁中
2. 將 body 中需要的代碼部分拷貝到你需要的地方即可

• 不需要 js 支持，只用 CSS3 就可以實現(xiàn)的評分效果

1. 將 CSS 中的樣式拷貝到你的網(wǎng)頁中
2. 將 body 中需要的代碼部分拷貝到你需要的地方即可

• ?imagehover.css? CSS 庫
• 里面包含了好多純 CSS3 鼠標(biāo)懸停后的圖片效果
• 可以直接拿來使用

1. 將 CSS 中的樣式拷貝到你的網(wǎng)頁中
2. 將 body 中的代碼部分拷貝到你需要的地方即可

模擬跳動的音樂音符效果

• 一組純 CSS3 實現(xiàn)的圖片墻動畫效果
• 不規(guī)則排列，帶有陰影倒影效果

1. 將 ?style.css? 樣式引入到網(wǎng)頁中
2. 將 body 中的代碼部分拷貝到你需要的地方即可

• 一個非常簡潔好看的純 CSS3 旋轉(zhuǎn)效果
• 當(dāng)鼠標(biāo)移動到圖片上后，會立體式翻轉(zhuǎn)顯示隱藏的文字內(nèi)容
• 鼠標(biāo)移走后消失

1. 將 ?style.css? 樣式引入到網(wǎng)頁中
2. 將 body 中的代碼部分拷貝到你需要的地方即可

• 很偶然的一個機(jī)會，看到百度 fls 構(gòu)建工具官網(wǎng) banner 上有一個不斷飛舞的火箭效果
• 感覺非常不錯，我第一反應(yīng)它肯定是純CSS3制作的，這是直覺，別問我為啥，因為換做是我
• 我也會用 CSS3 做啊，雖然麻煩了一些，但是用戶體驗非常棒

1. 將 ?style.css? 中的樣式復(fù)制到你的樣式表中
2. 將 body 中的代碼部分拷貝到你需要的地方即可

• 左右擺動的一棵樹，第一反應(yīng)應(yīng)該是圖片動畫做的
• 但是你錯了，這是用純代碼實現(xiàn)的效果，而且不需要js，是不是很贊呢

1. 將 body 中的代碼部分拷貝過去
2. 將 ?lanren.css? 樣式引入到你的頁面即可
   (注意：不兼容低版本瀏覽器哦)

• 利用 CSS3 的動畫屬性 animation 設(shè)置關(guān)鍵詞，并分步移動圖片，視覺感官上尾巴就在燃燒了。

• 但是有人要問了，這個是 CSS3 哦，低版本瀏覽器不支持怎么辦，那么簡單，這一點(diǎn)可以利用 jQuery 和背景動畫工具，叫做 Spritely，寫法是：?$(“#lanren”).sprite({fps:12,no_of_frames:44,rewind:true});?

1. 將 head 中的 CSS 樣式引入到你的網(wǎng)頁中
2. 在你需要顯示的地方建一個 id 為 lanren 的 div 即可

• 幾十個小動畫效果
• 當(dāng)鼠標(biāo)移入到圖片上的時候，其中的按鈕保持水平居中顯示
• 各種常見的動畫效果都在里面

1. 將 head 中的樣式復(fù)制到你的樣式表中
2. 將 body 中的代碼部分拷貝過去即可
   (css3 特效，不支持低版本瀏覽器)

• ?jquery.smoothproducts.js? 插件，直接支持在原始圖片位置上放大圖片
• 而不是像其他的普通的放大鏡效果那樣另外在旁邊開辟一個新的位置
• 適合特殊需要的同學(xué)使用

1. 將 head 中的樣式復(fù)制到你的樣式表中
2. 將 body 中的代碼部分拷貝過去即可
   (注意保持圖片路徑正確)

• 簡單有效的 css3 動畫效果，當(dāng)然，其中還引入了多個 js 插件

1. 將 lanren.css 樣式引入到你的網(wǎng)頁中
2. 將 body 中的代碼部分拷貝到你需要的地方即可
   (注意保持文件路徑正確)

• 之前推薦過好多此種 canvas 顆粒動畫效果
• 今天再次推薦一個，其中包含紅、黑、黃三種顏色
• 當(dāng)然，你也可以將顏色修改為你喜歡的，可以在 ?lanrenzhijia.js? 中修改顏色代碼即可

1. 將 head 中的樣式引入到你的樣式表中
2. 將 body 中的代碼部分拷貝過去即可

• 視覺效果非常不錯的 css3 列表下拉動畫效果，附件提供了多達(dá) 16 種不同的動畫效果
• 懶人們可根據(jù)需要復(fù)制對應(yīng)的article列表過去使用即可

1. 將 head 中的樣式引入到你的樣式表中
2. 將 body 中你需要的代碼部分拷貝過去即可

• 立體式旋轉(zhuǎn)效果非常棒的一款圣誕樹效果
• 默認(rèn)左右旋轉(zhuǎn)
• css3 效果，低版本瀏覽器不支持

1. 1、將 head 中的樣式引入到你的樣式表中
2. 2、將 body 中需要的代碼部分拷貝過去即可

• 插件提供了三種圖片切換效果，非常流暢
• 不過其中引入了大部分的 css3 代碼，低版本瀏覽器并不支持
• 建議在高版本瀏覽器下瀏覽

1. 將 head 中的樣式引入到你的樣式表中
2. 將 body 中的代碼部分拷貝過去即可
   (注意保持圖片路徑正確)

• 并不是純 css3 的，偶爾的一點(diǎn)點(diǎn)js也是可以忽略的啦
• 提供了 28 個不同的加載效果，你可以任選一種作為你的手機(jī)網(wǎng)頁端部分模塊的 loading 效果，而不需要考慮兼容性的問題

1. 將 head 中的 css 樣式以及js引入到你的網(wǎng)頁中
2. 選擇一個你喜歡的 loading 效果，復(fù)制其中的 html 到你的網(wǎng)頁中即可
   (注意 ?index.html? 底部的 js 別漏掉了)

• 位置固定在網(wǎng)頁的左上角導(dǎo)航
• 純 css3 實現(xiàn)的效果，當(dāng)然它并沒有采用任何圖片以及 js 效果
• 一樣非常美觀，不過可惜的是不支持低版本瀏覽器

1. 將 ?lanrenzhijia.css? 樣式引入到你的網(wǎng)頁中
2. 將 body 中的代碼部分拷貝到你需要的地方即可

• 就在不久之前萬維網(wǎng)聯(lián)盟已宣布完成 html5 標(biāo)準(zhǔn)的制定工作
• 所以呢，html5+css3 效果離我們生活已經(jīng)越來越近了
• 今天給大家推薦一款非常舒適，且只使用 css3 實現(xiàn)的效果，無 js

• 將附件 ?index.html? 文件中的 CSS 代碼以及 HTML 代碼拷貝到你的網(wǎng)頁中即可