DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> CSS3特效實例:11個CSS3代碼特效實例
CSS3特效實例:11個CSS3代碼特效實例
編輯:CSS詳解     

最近花了好些時間整理了一下CSS3的特效,利用比較直觀易懂的方式表現出來跟大家分享一下,希望大家會有一點點的收獲。

其中“ -moz- ” 一般指火狐的寫法,“ -webkit- ” 一般指webkit內核浏覽器的寫法.
1、border-radius 實現圓角效果,只需一行CSS代碼便可以實現,支持眾多浏覽器,當然不支持IE。

2、border-top-left-radius設置圓角各個角的半徑值(不支持IE)

 

3、box-shadow實現陰影效果(不支持IE)

 

4、CSS3實現陰影和圓角完美結合,個人感覺這種效果挺不錯的,很有立體感。

 

5、當別人機器上沒有這種字體,而你又想讓頁面上設置成這種字體時,不防考慮將字體上傳到服務器,只需要設置一個相對路徑和字體名稱就行。簡單吧?

6、text-shadow實現多重陰影效果,打造炫麗色彩。

7、opacity實現背景透明度(不支持IE)

 

8、transform:translate(X軸,Y軸)實現物體移動:

9、transform:scale(倍數)實現放大縮小。

10、transform:skew()將元素產生透視效果

 

11、transform:rotate(度數) 將元素旋轉X度

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved