CSS3

CSS3好看的特效網址：

http://www.lanrenzhijia.com/js/css3/

http://www.5iweb.com.cn/

http://www.chinaz.com/design/2012/0820/270175.shtml

http://www.php100.com/html/it/focus/2014/1108/7747.html

http://www.cnblogs.com/lhb25/archive/2011/11/22/best-awesome-css3-animation-demos.html

Filters主要是運用在圖片上，以實現一些特效。（儘管他們也能運用於video上），不過咱們在些只來討論圖片上的運用。

語法

      elm {
        filter: none | <filter-function > [ <filter-function> ]* } 

其默認值是none，他不具有繼承性，其中filter-function一個具備如下值可選：

1. grayscale灰度
2. sepia褐色（求專業指點翻譯）
3. saturate飽和度
4. hue-rotate色相旋轉
5. invert反色
6. opacity透明度
7. brightness亮度
8. contrast對比度
9. blur模糊
10. drop-shadow陰影

瀏覽器的兼容性

目前支持這個屬性的瀏覽器少得可憐，如今只是webkit支持，並且只有webkit nightly版本和Chrome 18.0.976以上以上版本才支持，因此說，你要是想看到效果就須要下載這兩個版本中的一個，我使用的是Google Chrome Canary。

下面咱們一塊兒來見證這些效果的實現過程，首先在頁面中有一張圖片：

      <img class="normal" title="normal" width="128" height="128" alt="HTML5 Logo" src="http://www.w3cplus.com/sites/default/files/filter.jpg" /> 

我在此處取名爲「normal」，表示此圖沒有任何「filter」效果，那麼後面的效果，咱們依次將其類名改爲對應的效果名。你們看下面的代碼吧：

1、grayscale灰度

使用這個特效，會把圖片變成灰色的，也就是說你的圖片將只有兩種顏色「黑色」和「白色」

      .grayscale{ -webkit-filter:grayscale(1); } 

默認值：100％，

若是你在grayscale()中沒有任何參數值，將會以「100%」渲染。其效果下圖所示：

2、sepia

sepia不知道如何譯，暫時就叫他「褐色」，使用這種效果，你的圖片好像很古老的同樣

      .sepia{ -webkit-filter:sepia(1); } 

默認值：100％，

若是你在sepia()中沒有任參數值，將會以「100％」渲染，具體效果以下：

3、saturate飽和度

saturat是用來改變圖片的飽和度

      .saturate{ -webkit-filter:saturate(0.5); } 

默認值：100％，

若是咱們將其值變大到300%

      .saturate{ -webkit-filter:saturate(3); } 

4、hue-rotate色相旋轉

hue-rotate用來改變圖片的色相

      .hue-rotate{ -webkit-filter:hue-rotate(90deg); } 

默認值：0deg

5、invert反色

invert作出來的效果就像是咱們照相機底面的效果同樣

      .invert{ -webkit-filter:invert(1); } 

默認值：100％

6、opacity透明度

這個就很好理解了，改變圖片的透明度

      .opacity{ -webkit-filter:opacity(.2); } 

默認值：100%

7、brightness亮度

改變圖片的亮度

      .brightness{ -webkit-filter:brightness(.5); } 

默認值：100％

8、contrast對比度

改變圖片的對比度，整個psd的，都懂這個意思

      .contrast{ -webkit-filter:contrast(2); } 

默認值：100％

9、blur模糊

一看字面意思就知道了，改變圖片的清晰度

      .blur{ -webkit-filter:blur(3px); } 

默認值：0

10、drop-shadow陰影

這個很像box-shadow同樣的效果，給圖片加陰影效果

      .drop-shadow{ -webkit-filter:drop-shadow(5px 5px 5px #ccc); } 

那麼上面就是filter中的十種效果，固然你們能夠根據本身的需求進行自定義：

      .custom{ -webkit-filter:saturate(5) hue-rotate(500deg) grayscale(0.3) sepia(0.7) contrast(1.5) invert(0.2) brightness(.9); }