<address id="pftjp"><th id="pftjp"><th id="pftjp"></th></th></address>

    <address id="pftjp"></address>
        <span id="pftjp"><dl id="pftjp"><progress id="pftjp"></progress></dl></span>

        <span id="pftjp"></span>

        推薦閱讀
        相關文章
        網站建設您當前位置:主頁 > 網絡學院 > 網站建設 >

        淺談網站制作中CSS濾鏡技巧與細節

        發布日期:2020-12-20 來源:優橙 瀏覽量:
        摘要: 本文主要介紹CSS過濾器的不常見用法,希望給讀者帶來一些干貨! 好的,直接轉到下面的文本。本文描述的過濾器是指CSS3問世后的過濾器,而不是工業工程系列時代的過濾器。語法如

        本文主要介紹CSS過濾器的不常見用法,希望給讀者帶來一些干貨!


        好的,直接轉到下面的文本。本文描述的過濾器是指CSS3問世后的過濾器,而不是工業工程系列時代的過濾器。語法如下。如果您沒有接觸過這個屬性,您可以像MDN-Filter一樣簡單地理解它:


        ``


        {


        濾波器:模糊(5px);


        filter:亮度(0.4);


        filter:對比度(200%);


        filter : drop-shadow(16px 16px 20px藍色);


        filter:灰度(50%);


        filter:色調旋轉(90度);


        filter:反轉(75%);


        filter:不透明度(25%);


        filter:飽和(30%);


        filter : sepia(60%);


        ``


        ``


        /*應用多個濾鏡*/


        濾鏡:對比度(175%)亮度(3%);



        /*全局值*/


        filter:繼承;


        filter: initial


        filter: unset


        }


        ```


        ## 基本用法


        先簡單看看幾種濾鏡的效果:


        ![](http://upload-images.jianshu.io/upload_images/8373224-cb33f949395b0f60?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)



        你可以通過 hover 取消濾鏡,觀察該濾鏡的效果。


        簡單來說,CSS 濾鏡就是提供類似 PS 的圖形特效,像模糊,銳化或元素變色等功能。通常被用于調整圖片,背景和邊界的渲染。本文就會圍繞這些濾鏡展開,看看具體能怎么使用或者玩出什么花活。



        ![](http://upload-images.jianshu.io/upload_images/8373224-3eae5b43397c214d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)



        ## 常用用法


        既然是標題是你所不知道的技巧與細節,那么比較常用的一些用法就不再贅述,通常我們見得比較多的 CSS 濾鏡用法有:



        - 使用 `filter: blur()`生成毛玻璃效果



        - 使用 `filter: drop-shadow()`生成整體陰影效果



        - 使用 `filter: opacity()`生成透明度



        如果對上面的技巧不是很了解,可以稍稍百度谷歌一下,下文將由淺及深,介紹一些不大常見的濾鏡的具體用法及一些小細節:


        ## contrast/brightness — hover 增亮圖片


        通常頁面上的按鈕,都會有 hover/active 的顏色變化,以增強與用戶的交互。但是一些圖片展示,則很少有 hover 的交互,運用` filter: contrast()`或者`filter: brightness()`可以在 hover 圖片的時候,調整圖片的對比圖或者亮度,達到聚焦用戶視野的目的。


        `brightness表示亮度,contrast 表示對比度。`



        當然,這個方法同樣適用于按鈕,簡單的 CSS 代碼如下:


        ```


        .btn:hover,


        .img:hover {


        transition: filter .3s


        filter:亮度(1.1)對比度(110%);


        }


        ```


        ![](http://upload-images.jianshu.io/upload_images/8373224-353b8d4f07f14df6.gif?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)



        ![](http://upload-images.jianshu.io/upload_images/8373224-337779738e33478f.gif?imageMogr2/auto-orient/strip)



        ## blur — 生成圖像陰影


        通常而言,我們生成陰影的方式大多是 box-shadow 、filter: drop-shadow() 、text-shadow 。但是,使用它們生成陰影是陰影只能是單色的。


        有讀者同學會問了,你這么說,難道還可以生成漸變色的陰影不成?



        ![Paste_Image.png](http://upload-images.jianshu.io/upload_images/8373224-c4196975425efc6c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)



        額,當然不行。



        ![Paste_Image.png](http://upload-images.jianshu.io/upload_images/8373224-cd32750f8352bc55.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)



        這個真不行,但是通過巧妙的利用 filter: blur


        模糊濾鏡,我們可以假裝生成漸變色或者說是顏色豐富的陰影效果。


        假設我們有下述這樣一張頭像圖片:



        ![Paste_Image.png](http://upload-images.jianshu.io/upload_images/8373224-d4698bd116437002.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)



        下面就利用濾鏡,給它添加一層與原圖顏色相仿的陰影效果,核心 CSS 代碼如下:


        ``


        。avator {


        相對位置:


        background: url($img)不重復中心中心;


        背景尺寸: 100% 100%;


        ``


        ``


        :after {


        content :“”;


        position:絕對值;


        top : 10%;


        寬度:±100%;


        height : 100%;


        background: inherit


        背景尺寸: 100% 100%;


        filter:模糊(10px)亮度(80%)不透明度(. 8);


        z-index :-1;


        }


        }


        ``


        看看效果:



        ![](http://上傳-圖片。建設/上傳-圖片/8373224-7af75a4486f98a54.png?imageMogr 2/自動定向/條帶%7CimageView2/2/w/1240)



        其簡單原理是使用偽元素生成與原始圖像大小相同的新圖像,并將其疊加在原始圖像下,然后使用濾鏡模糊濾鏡:模糊()


        與其他亮度/對比度、透明度和其他濾鏡合作,創建一個虛幻的陰影,并將其偽裝成原始圖像的陰影效果。


        嗯,最重要的是這句話:濾鏡:模糊(10px)亮度(80%)不透明度(. 8);


        .


        代碼pendemo-filtercreate)


        ##模糊混合對比度產生融合效果


        這是本文的重點。模糊濾鏡疊加對比度濾鏡產生的融合效果。讓你知道什么是CSS黑色技術!


        分別取出兩個過濾器。他們的職能是:


        1。filter: blur():在圖像上設置高斯模糊效果。


        2。filter: contrast():調整圖像的對比度。



        然而,當它們“結合在一起”時,會有一種奇妙的融合現象。通過對比度濾波消除高斯模糊的模糊邊緣,通過高斯模糊實現融合效果。


        讓我們看一個簡單的例子:



        ![微信圖片_ 201710131002608.gif] (http://上傳-圖片。建shu.io/upload _圖片/8373224-f58712a351cb8253.gif?imageMogr 2/自動定向/剝離)



        仔細觀察兩個圓圈相交的過程。當邊緣相互接觸時,將產生邊界融合效應。


        上述效果的實現基于兩點:


        1。圖形在畫布背景上以濾鏡:對比度設置為動畫()


        2。要被動畫化的圖形用過濾器: blur()設置(要被動畫化的圖形的父元素需要用過濾器:對比度()設置)


        畫布)



        意味著上面兩個圓圈的運動背后實際上是一個疊加的對比度()和濾波器:


        有一個大的白色背景,而這兩個圓是用filter: blur()設置的


        ,兩個條件是必不可少的。


        當然,背景顏色不一定是白色。我們稍微修改了上面的演示。簡單示意圖如下:



        ![](http://上傳-圖片。建設/上傳-圖片/8373224-ef2e140b3ac33409。巴布亞新幾內亞?imageMogr 2/自動定向/條帶%7CimageView2/2/w/1240)



        燃燒的火焰


        好吧,在介紹了上面的原理之后,讓我們來看看用這種效果產生的一些強大的CSS效果。其中,最驚人的是利用融合效應產生火焰。這種效果最早是由作者中野裕介看到的:



        ![微信圖片_ 20171013102804.gif] (http://上傳-圖片。建shu.io/Upload _圖片/8373224-28D 45081db917631.gif?imageMogr 2/自動定向/剝離)




        不要懷疑你的眼睛,上面的GIF效果是用純CSS實現的。


        內核或濾波器:對比度()


        和濾波器:模糊()


        一起使用,但實施過程也很有趣。我們需要用CSS畫一個火焰形狀。


        火焰形狀CSS核心代碼如下:


        ``


        ?;?/p>

        width : 0;


        height : 0;


        border-radius : 45%;


        box-sizing : border-box;


        border: 100px固體# 000;


        border-bottom : 100 pxsolid transparent;


        background-color : # b 5932 f;


        transform : Scalex(. 4);


        filter:模糊(20px)對比度(30);


        }


        ``


        看起來像這樣:



        ![(http://上傳-圖片。建書。io/上傳-圖片/8373224-5f 0 b5 db 61eb 476 EC。png?imageMogr 2/自動定向/條帶%7CimageView2/2/w/1240)



        分解流程:



        ![](http://upload-images.jianshu.io/upload_images/8373224-d473b05ea16ea04a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)



        在純黑色背景上,你會得到上圖的效果。


        這里會有一個大問題,添加濾鏡:模糊(20px)對比度(30);



        之后,為什么黑色和黃色之間會出現紅色邊框?



        我在這里咨詢了幾位設計師和前端同事,我得到的答案可能是,兩個不同濾鏡的顏色值處理算法在邊界重疊以獲得另一種顏色。 (不一定準確,請評論),嘗試在PS中恢復這種效果,但PS沒有對比度()過濾器,結果偏差相當大。



        好,繼續課文。接下來,我們只需要把火放在火里。


        在這個分區內,從下到上使用大量黑色圓圈,不規則地穿過火焰。由于過濾器的融合效果,產生火焰效果。為了便于理解,我將背景顏色切換為白色?;鹧鎰赢嫷脑硪荒苛巳?



        ![](http://上傳-圖片。建設/上傳-圖片/8373224-86 a5 F5 da 6a 95080 . gif?imageMogr 2/自動定向/剝離)




        ##文本融合動畫


        此外,我們可以在動畫制作過程中動態更改元素濾鏡的濾鏡:模糊()


        的價值。


        使用這種方法,我們還可以設計一些文本融合效果:



        ![](http://上傳-圖片。建設/上傳-圖片/8373224-b0725f40883e356e.gif?imageMogr 2/自動定向/剝離)



        ![](http://上傳-圖片。建設. io/上傳-圖片/8373224-3a 91b 42e 02821添加. gif?imageMogr 2/自動定向/剝離)




        具體實施情況見下文:


        Code Pendemo-Word動畫|文字過濾器(https://codepen.io/Chokcoco/pen/jLjNRj)



        ##值得注意的細節


        雖然動畫很美,但在具體使用過程中仍有一些需要注意的地方:



        1。CSS濾鏡可以同時為同一元素定義多個濾鏡,例如,濾鏡:對比度(150%)亮度(1.5)


        ,但不同順序的過濾器效果不同。



        也就是說,使用:°對比度(150%)亮度(1.5)。


        和濾波器:亮度(1.5)對比度(150%)


        處理同一張圖片會產生不同的結果,因為濾鏡的顏色值處理算法會按順序處理圖片。


        2。過濾動畫需要大量的計算和連續重繪頁面。這是一個非常消耗性能的動畫。使用它時,你應該注意場景。記住打開硬件加速,合理使用分層技術;


        3。模糊()混合對比度()濾鏡效果,設置不同的顏色會產生不同的效果,這種顏色疊加的具體算法暫時不是很清楚,更好的使用方法是嘗試不同的顏色并觀察以獲得最佳效果;


        4。CSS3過濾器的兼容性不是很好,但可以在移動端正常使用。要獲得更準確的兼容性列表,請選中“我可以使用嗎”。


        福州友誠互聯網,一家致力于福州網站建設網站制作公司,為客戶提供小程序制作,促進福州網絡全網推廣,準確開發客戶。歡迎來到http://www.xinhetc.com


        全國統一客服熱線

        13809509600

        周一至周五 9:00-22:30

        法定節假日 9:00-23:00

        微信公眾號
        欧美videosgratis杂交_我高潮了男友不停继续弄_韩国美女19禁福利视频_我被老板在办公室里调教3p_在线观看日本高清mv视频_韩国理论电影