<noframes id="pfp5n">

<form id="pfp5n"></form>
<noframes id="pfp5n">
<noframes id="pfp5n"><form id="pfp5n"></form>
<address id="pfp5n"><form id="pfp5n"><nobr id="pfp5n"></nobr></form></address>
<form id="pfp5n"></form>

    <listing id="pfp5n"></listing>

    <listing id="pfp5n"></listing>
          您當前的位置:首頁 > 建站常識 > css強化

          CSS3 Filter的十種特效(必看篇)

          2016-10-25
            最近到處看到有人在說CSS3的filter一直沒有時間自己去測試這效果。今天終于抽出時間學習這個CSS3的Filter。不整不知道呀,一整才讓我感到吃驚,太強大了。大家先來看個效果吧:
            我想光看上面的效果就能吸引你了,要是你自己動手的話,我想您更會感到神奇。細一看,這些效果就像是photoshop整出來的一樣,其實是真是這樣的,有很多效果都是類似于photoshop中的特效。不過有一點大家需要特別的注意:此處的CSS3 filter和css filter完全是兩樣東東。更不是我們一直說的IE濾鏡。具體所指的是什么?。我就不多說了,因為說也說不清楚,我只想和大家一起探討的是如休整使用這個“CSS3 Filter”。那我們開始吧。
            Filters主要是運用在圖片上,以實現一些特效。(盡管他們也能運用于video上),不過我們在些只來討論圖片上的運用。
            語法
            elm {
              filter: none | <filter-function > [ <filter-function> ]*
            }
            其默認值是none,他不具備繼承性,其中filter-function一個具有以下值可選:

           ?、?、grayscale灰度XZW七七世界-網站建設|UI設計|人資系統|二次開發

           ?、?、sepia褐色(求專業指點翻譯)XZW七七世界-網站建設|UI設計|人資系統|二次開發

           ?、?、saturate飽和度XZW七七世界-網站建設|UI設計|人資系統|二次開發

           ?、?、hue-rotate色相旋轉XZW七七世界-網站建設|UI設計|人資系統|二次開發

           ?、?、invert反色XZW七七世界-網站建設|UI設計|人資系統|二次開發

           ?、?、opacity透明度XZW七七世界-網站建設|UI設計|人資系統|二次開發

           ?、?、brightness亮度XZW七七世界-網站建設|UI設計|人資系統|二次開發

           ?、?、contrast對比度XZW七七世界-網站建設|UI設計|人資系統|二次開發

           ?、?、blur模糊XZW七七世界-網站建設|UI設計|人資系統|二次開發

           ?、?、rop-shadow陰影XZW七七世界-網站建設|UI設計|人資系統|二次開發

            瀏覽器的兼容性
            大多數瀏覽器都支持,另外一個低版本的瀏覽器不支持,比如:IE6、IE7、IE8等,推薦忽略考慮低版本,因為軟件一直在更新,瀏覽器也一直在更新,低版本的瀏覽器很快都被淘汰了。
            下面我們一起來見證這些效果的實現過程,首先在頁面中有一張圖片:
            <img class="normal"  width="120" height="120"
                src="http://www.dayoutiandi.com/skin/web/index/d4.jpg" />
           
            我在此處取名為“normal”,表示此圖沒有任何“filter”效果,那么后面的效果,我們依次將其類名改成對應的效果名。大家看下面的代碼吧:
            一、grayscale灰度
            使用這個特效,會把圖片變成灰色的,也就是說你的圖片將只有兩種顏色“黑色”和“白色”
            .grayscale{
              -webkit-filter:grayscale(1);
            }
            默認值:100%,
            如果你在grayscale()中沒有任何參數值,將會以“100%”渲染。其效果下圖所示:
            二、sepia
            sepia不知道如何譯,暫時就叫他“褐色”,使用這種效果,你的圖片好像很古老的一樣
            .sepia{
              -webkit-filter:sepia(1);
            }
            默認值:100%,
            如果你在sepia()中沒有任參數值,將會以“100%”渲染,具體效果如下:
            三、saturate飽和度
            saturat是用來改變圖片的飽和度
            .saturate{
              -webkit-filter:saturate(0.5);
            }
            默認值:100%,
            如果我們將其值變大到300%
            .saturate{
              -webkit-filter:saturate(3);
            }
            四、hue-rotate色相旋轉
            hue-rotate用來改變圖片的色相
            .hue-rotate{
              -webkit-filter:hue-rotate(90deg);
            }
            默認值:0deg
            五、invert反色
            invert做出來的效果就像是我們照相機底面的效果一樣
            .invert{
              -webkit-filter:invert(1);
            }
            默認值:100%
            六、opacity透明度
            這個就很好理解了,改變圖片的透明度
            .opacity{
              -webkit-filter:opacity(.2);
            }
            默認值:100%
            七、brightness亮度
            改變圖片的亮度
            .brightness{
              -webkit-filter:brightness(.5);
            }
            默認值:100%
            八、contrast對比度
            改變圖片的對比度,整個psd的,都懂這個意思
            .contrast{
              -webkit-filter:contrast(2);
            }
            默認值:100%
            九、blur模糊
            一看字面意思就知道了,改變圖片的清晰度
            .blur{
              -webkit-filter:blur(3px);
            }
            默認值:0
            十、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);
            }
           

            考慮到代碼的兼容性,最后,在用filter屬性的時候,我們一定要加上:XZW七七世界-網站建設|UI設計|人資系統|二次開發

            -webkit-filter: filter屬性值;XZW七七世界-網站建設|UI設計|人資系統|二次開發

            -moz-filter: filter屬性值;XZW七七世界-網站建設|UI設計|人資系統|二次開發

            -ms-filter: filter屬性值;XZW七七世界-網站建設|UI設計|人資系統|二次開發

            -o-filter: filter屬性值;XZW七七世界-網站建設|UI設計|人資系統|二次開發

            filter: filter屬性值;XZW七七世界-網站建設|UI設計|人資系統|二次開發

            filter: filter屬性值;XZW七七世界-網站建設|UI設計|人資系統|二次開發

           XZW七七世界-網站建設|UI設計|人資系統|二次開發

          本文關鍵詞:Filter  十種特效  

          一切精彩源自七七網絡!我們傾力打造時尚潮流第一線!

          ? 2012-2024七七世界網站建設     20707.net 1125w.com 版權所有     豫ICP備14018694號-1

          人成久久影院,和小姪女保持性关系故事,亚洲综合色欲色欲综合网站
          <noframes id="pfp5n">

          <form id="pfp5n"></form>
          <noframes id="pfp5n">
          <noframes id="pfp5n"><form id="pfp5n"></form>
          <address id="pfp5n"><form id="pfp5n"><nobr id="pfp5n"></nobr></form></address>
          <form id="pfp5n"></form>

            <listing id="pfp5n"></listing>

            <listing id="pfp5n"></listing>