close

CSS3特效實例:11個CSS3代碼特效實例 

 

 

http://www.inspirr.com 
 

 


 

 

 

最近花了好些時間整理了一下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度

 

 

 

   

 

  Tag: 設計公司 | 網頁設計公司 | 廣告公司 | 網站設計 | 平面設計 | 互動媒體 | 網頁設計 | Web design | Website design | design house | 媒體公司 | Iphone app | 程式設計 | Flash 網頁 | Flash game | 動畫設計 | 後期製作 | 網上商店 | 網上宣傳 | 網頁服務 |

arrow
arrow
    創作者介紹
    創作者 beangte 的頭像
    beangte

    beangte的部落格

    beangte 發表在 痞客邦 留言(0) 人氣()