CSS3高級篇：濾鏡

本文轉載自查看原文 2017-09-16 12:56 3725 CSS3

CSS3高級篇：濾鏡

好了，這是本人的第一篇博文，希望給讀者們帶來技術上的提升

本文主要介紹CSS3里的filters（沒有接觸過這個屬性的請自行百度）

基本用法

OK廢話不多說，直接上效果圖

CSS代碼

img
{
    filter: opacity(25%);
    filter: grayscale(50%);  
    filter: invert(1);  
    filter: brightness(0.4);
    filter: saturate(300%);
    filter: sepia(60%);
    filter: blur(2px);
    filter: hue-rotate(90deg);
    filter: contrast(2);
    filter: drop-shadow(5px 5px 5px #aaa);
}

依次的濾鏡效果分別是透明度、灰度、反色、亮度、飽和度、褐色、模糊（本人最喜歡的一種濾鏡）、色相翻轉、對比度、陰影

類似於PS里面的濾鏡，當然沒有PS里面的濾鏡多

PS：可以使用hover觀察效果

高級應用

1.利用 blur 生成圖像陰影

一提到陰影，可能多數人（也包括我）想到的是box-shadow，filter：drop-shadow，text-shadow。額。。。總之離不開shadow

但這種方式生成的陰影都是單色，有沒有能跟隨圖像顏色的陰影，答案是 “當然有”

先看原圖

效果圖

我累個去？還真有這種操作？

HTML代碼

<div class="avator"></div>

CSS代碼

.avator {
　　position: relative;
　　width: 200px;
　　height: 200px;
　　border-radius: 50%;
　　background: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505822443&di=941986df9c6514d5d43eaba4aa938347&imgtype=jpg&er=1&src=http%3A%2F%2Fimg.qqtouxiang8.net%2Fuploads%2Fallimg%2Fc150313%2F142623130563050-922006.jpg") no-repeat center center;
　　background-size: 100% 100%;
}
            
.avator::after {
　　content: "";
　　position: absolute;
　　top: 10%;
　　left: 0%;
　　width: 100%;
　　height: 100%;
　　background: inherit;
　　background-size: 100% 100%;
　　border-radius: 50%;
　　-webkit-transform: scale(0.95);
　　transform: scale(0.95);
　　-webkit-filter: blur(10px) brightness(80%) opacity(0.8);
　　filter: blur(10px) brightness(80%) opacity(0.8);
　　z-index: -1;
}

其原理就是利用偽元素，生成一個和原圖一模一樣的新圖疊加在原圖之下

然后利用模糊濾鏡配合亮度和透明度，給新圖制造出一個虛幻的影子，偽裝成原圖的陰影效果

最關鍵的一句代碼：
filter: blur(10px) brightness(80%) opacity(0.8);
嗯沒錯，就是這一句　　

2.利用 blur 混合 contrast 產生融合效果

接下來介紹的這個，是本文的重點，模糊濾鏡疊加對比度濾鏡產生的融合效果。讓你知道什么是 CSS 黑科技！

單獨將兩個濾鏡拿出來，它們的作用分別是：

filter：blur()：給圖像設置高斯模糊效果。

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

但是，當他們“合體”的時候，產生了奇妙的融合現象，通過對比度濾鏡把高斯模糊的模糊邊緣給干掉，利用高斯模糊實現融合效果。

先來看一個栗子：

HTML代碼

<div class="filter-mix"></div>

CSS代碼

        <style>
            .filter-mix {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 300px;
                height: 200px;
                filter: contrast(20);
                background: #fff;
            }
            
            .filter-mix::before {
                content: "";
                position: absolute;
                width: 120px;
                height: 120px;
                border-radius: 50%;
                background: #333;
                top: 40px;
                left: 40px;
                z-index: 2;
                filter: blur(6px);
                box-sizing: border-box;
                animation: filterBallMove 4s ease-out infinite;
            }
            
            .filter-mix::after {
                content: "";
                position: absolute;
                width: 80px;
                height: 80px;
                border-radius: 50%;
                background: #3F51B5;
                top: 60px;
                right: 40px;
                z-index: 2;
                filter: blur(6px);
                animation: filterBallMove2 4s ease-out infinite;
            }
            
            @keyframes filterBallMove {
                50% {
                    left: 140px;
                }
            }
            
            @keyframes filterBallMove2 {
                50% {
                    right: 140px;
                }
            }
        </style>

仔細看兩圓相交的過程，在邊與邊接觸的時候，會產生一種邊界融合的效果。

上述效果的實現基於兩點：

圖形是在被設置了 filter: contrast() 的畫布背景上進行動畫的

進行動畫的圖形被設置了 filter: blur()（進行動畫的圖形的父元素需要是被設置了 filter: contrast() 的畫布）

意思是，上面兩圓運動的背后，其實是疊加了一張設置了 filter: contrast() 的大白色背景，而兩個圓形則被設置了 filter: blur() ，兩個條件缺一不可。

3.燃燒的火焰

先上圖

不用懷疑你的眼睛，上述 GIF 效果就是使用純 CSS 實現的。

核心還是 filter: contrast() 與 filter: blur() 配合使用

HTML代碼

<body>
        <div class="g-container">
            <div class="g-fire">
                <div class="g-dot"></div>
                <div class="g-dot"></div>
                <div class="g-dot"></div>
                <div class="g-dot"></div>
                <div class="g-dot"></div>
                <div class="g-dot"></div>
                <div class="g-dot"></div>
                <div class="g-dot"></div>
                <div class="g-dot"></div>
                <div class="g-dot"></div>
                <div class="g-dot"></div>
                <div class="g-dot"></div>
                <div class="g-dot"></div>
                <div class="g-dot"></div>
                <div class="g-dot"></div>
                <div class="g-dot"></div>
                <div class="g-dot"></div>
                <div class="g-dot"></div>
                <div class="g-dot"></div>
                <div class="g-dot"></div>
                <div class="g-dot"></div>
                <div class="g-dot"></div>
                <div class="g-dot"></div>
                <div class="g-dot"></div>
                <div class="g-dot"></div>
                <div class="g-dot"></div>
                <div class="g-dot"></div>
                <div class="g-dot"></div>
                <div class="g-dot"></div>
                <div class="g-dot"></div>
                <div class="g-dot"></div>
                <div class="g-dot"></div>
                <div class="g-dot"></div>
                <div class="g-dot"></div>
                <div class="g-dot"></div>
                <div class="g-dot"></div>
                <div class="g-dot"></div>
                <div class="g-dot"></div>
                <div class="g-dot"></div>
                <div class="g-dot"></div>
            </div>
        </div>
    </body>

View Code

CSS代碼

<style>
            .g-container {
                position: relative;
                width: 384px;
                height: 300px;
                margin: 0 auto;
                background-color: #000;
            }
            
            .g-fire {
                position: absolute;
                width: 0;
                height: 0;
                bottom: 100px;
                left: 50%;
                border-radius: 45%;
                box-sizing: border-box;
                border: 200px solid #000;
                border-bottom: 200px solid transparent;
                -webkit-transform: translate(-50%, 0) scaleX(0.4);
                transform: translate(-50%, 0) scaleX(0.4);
                background-color: var(--fireColor);
                -webkit-filter: blur(20px) contrast(30);
                filter: blur(20px) contrast(30);
            }
            
            .g-dot {
                position: absolute;
                bottom: -210px;
                left: 0;
                width: var(--dotSize);
                height: var(--dotSize);
                background: #000;
                border-radius: 50%;
            }
            
            .g-dot:nth-child(1) {
                bottom: -352px;
                left: -138px;
                -webkit-animation: move 2s infinite 0.2s linear;
                animation: move 2s infinite 0.2s linear;
            }
            
            .g-dot:nth-child(2) {
                bottom: -339px;
                left: -86px;
                -webkit-animation: move 1.9s infinite 5.8s linear;
                animation: move 1.9s infinite 5.8s linear;
            }
            
            .g-dot:nth-child(3) {
                bottom: -344px;
                left: -27px;
                -webkit-animation: move 1.4s infinite 2.5s linear;
                animation: move 1.4s infinite 2.5s linear;
            }
            
            .g-dot:nth-child(4) {
                bottom: -308px;
                left: -119px;
                -webkit-animation: move 3.2s infinite 2.8s linear;
                animation: move 3.2s infinite 2.8s linear;
            }
            
            .g-dot:nth-child(5) {
                bottom: -311px;
                left: 81px;
                -webkit-animation: move 0.9s infinite 0.2s linear;
                animation: move 0.9s infinite 0.2s linear;
            }
            
            .g-dot:nth-child(6) {
                bottom: -275px;
                left: 130px;
                -webkit-animation: move 2.7s infinite 1.8s linear;
                animation: move 2.7s infinite 1.8s linear;
            }
            
            .g-dot:nth-child(7) {
                bottom: -354px;
                left: -41px;
                -webkit-animation: move 2.7s infinite 5.1s linear;
                animation: move 2.7s infinite 5.1s linear;
            }
            
            .g-dot:nth-child(8) {
                bottom: -303px;
                left: -21px;
                -webkit-animation: move 0.9s infinite 5.1s linear;
                animation: move 0.9s infinite 5.1s linear;
            }
            
            .g-dot:nth-child(9) {
                bottom: -245px;
                left: 24px;
                -webkit-animation: move 2.4s infinite 1.5s linear;
                animation: move 2.4s infinite 1.5s linear;
            }
            
            .g-dot:nth-child(10) {
                bottom: -347px;
                left: -115px;
                -webkit-animation: move 1.2s infinite 5.5s linear;
                animation: move 1.2s infinite 5.5s linear;
            }
            
            .g-dot:nth-child(11) {
                bottom: -317px;
                left: -70px;
                -webkit-animation: move 1s infinite 3.4s linear;
                animation: move 1s infinite 3.4s linear;
            }
            
            .g-dot:nth-child(12) {
                bottom: -354px;
                left: 39px;
                -webkit-animation: move 1.6s infinite 3.1s linear;
                animation: move 1.6s infinite 3.1s linear;
            }
            
            .g-dot:nth-child(13) {
                bottom: -333px;
                left: 2px;
                -webkit-animation: move 2.5s infinite 1.6s linear;
                animation: move 2.5s infinite 1.6s linear;
            }
            
            .g-dot:nth-child(14) {
                bottom: -314px;
                left: -45px;
                -webkit-animation: move 1.5s infinite 5.7s linear;
                animation: move 1.5s infinite 5.7s linear;
            }
            
            .g-dot:nth-child(15) {
                bottom: -336px;
                left: 38px;
                -webkit-animation: move 3s infinite 1.3s linear;
                animation: move 3s infinite 1.3s linear;
            }
            
            .g-dot:nth-child(16) {
                bottom: -258px;
                left: -44px;
                -webkit-animation: move 1.1s infinite 2s linear;
                animation: move 1.1s infinite 2s linear;
            }
            
            .g-dot:nth-child(17) {
                bottom: -348px;
                left: -80px;
                -webkit-animation: move 0.9s infinite 3.8s linear;
                animation: move 0.9s infinite 3.8s linear;
            }
            
            .g-dot:nth-child(18) {
                bottom: -335px;
                left: 23px;
                -webkit-animation: move 2.4s infinite 4.8s linear;
                animation: move 2.4s infinite 4.8s linear;
            }
            
            .g-dot:nth-child(19) {
                bottom: -329px;
                left: -100px;
                -webkit-animation: move 0.9s infinite 1.3s linear;
                animation: move 0.9s infinite 1.3s linear;
            }
            
            .g-dot:nth-child(20) {
                bottom: -348px;
                left: 30px;
                -webkit-animation: move 3.3s infinite 1s linear;
                animation: move 3.3s infinite 1s linear;
            }
            
            .g-dot:nth-child(21) {
                bottom: -329px;
                left: -135px;
                -webkit-animation: move 2s infinite 2.9s linear;
                animation: move 2s infinite 2.9s linear;
            }
            
            .g-dot:nth-child(22) {
                bottom: -249px;
                left: 139px;
                -webkit-animation: move 3.1s infinite 0.8s linear;
                animation: move 3.1s infinite 0.8s linear;
            }
            
            .g-dot:nth-child(23) {
                bottom: -281px;
                left: -74px;
                -webkit-animation: move 1.1s infinite 5.6s linear;
                animation: move 1.1s infinite 5.6s linear;
            }
            
            .g-dot:nth-child(24) {
                bottom: -310px;
                left: -156px;
                -webkit-animation: move 2.9s infinite 1.7s linear;
                animation: move 2.9s infinite 1.7s linear;
            }
            
            .g-dot:nth-child(25) {
                bottom: -317px;
                left: -147px;
                -webkit-animation: move 2.5s infinite 1.4s linear;
                animation: move 2.5s infinite 1.4s linear;
            }
            
            .g-dot:nth-child(26) {
                bottom: -276px;
                left: -116px;
                -webkit-animation: move 2.4s infinite 4.7s linear;
                animation: move 2.4s infinite 4.7s linear;
            }
            
            .g-dot:nth-child(27) {
                bottom: -270px;
                left: 108px;
                -webkit-animation: move 0.8s infinite 0.4s linear;
                animation: move 0.8s infinite 0.4s linear;
            }
            
            .g-dot:nth-child(28) {
                bottom: -337px;
                left: -91px;
                -webkit-animation: move 2.4s infinite 4.3s linear;
                animation: move 2.4s infinite 4.3s linear;
            }
            
            .g-dot:nth-child(29) {
                bottom: -298px;
                left: 91px;
                -webkit-animation: move 0.8s infinite 0.3s linear;
                animation: move 0.8s infinite 0.3s linear;
            }
            
            .g-dot:nth-child(30) {
                bottom: -282px;
                left: 57px;
                -webkit-animation: move 1.7s infinite 5.4s linear;
                animation: move 1.7s infinite 5.4s linear;
            }
            
            .g-dot:nth-child(31) {
                bottom: -342px;
                left: -25px;
                -webkit-animation: move 1.4s infinite 4.9s linear;
                animation: move 1.4s infinite 4.9s linear;
            }
            
            .g-dot:nth-child(32) {
                bottom: -289px;
                left: -72px;
                -webkit-animation: move 1.8s infinite 4.7s linear;
                animation: move 1.8s infinite 4.7s linear;
            }
            
            .g-dot:nth-child(33) {
                bottom: -356px;
                left: 99px;
                -webkit-animation: move 1.6s infinite 0.5s linear;
                animation: move 1.6s infinite 0.5s linear;
            }
            
            .g-dot:nth-child(34) {
                bottom: -301px;
                left: -117px;
                -webkit-animation: move 1.9s infinite 1.7s linear;
                animation: move 1.9s infinite 1.7s linear;
            }
            
            .g-dot:nth-child(35) {
                bottom: -288px;
                left: 27px;
                -webkit-animation: move 2.9s infinite 2.3s linear;
                animation: move 2.9s infinite 2.3s linear;
            }
            
            .g-dot:nth-child(36) {
                bottom: -359px;
                left: -26px;
                -webkit-animation: move 2.5s infinite 2s linear;
                animation: move 2.5s infinite 2s linear;
            }
            
            .g-dot:nth-child(37) {
                bottom: -247px;
                left: 88px;
                -webkit-animation: move 3.1s infinite 0.1s linear;
                animation: move 3.1s infinite 0.1s linear;
            }
            
            .g-dot:nth-child(38) {
                bottom: -343px;
                left: -14px;
                -webkit-animation: move 0.9s infinite 5.8s linear;
                animation: move 0.9s infinite 5.8s linear;
            }
            
            .g-dot:nth-child(39) {
                bottom: -289px;
                left: 97px;
                -webkit-animation: move 1.5s infinite 5.2s linear;
                animation: move 1.5s infinite 5.2s linear;
            }
            
            .g-dot:nth-child(40) {
                bottom: -259px;
                left: -112px;
                -webkit-animation: move 3.2s infinite 0.2s linear;
                animation: move 3.2s infinite 0.2s linear;
            }
            
            @-webkit-keyframes move {
                100% {
                    -webkit-transform: translate3d(0, -350px, 0);
                    transform: translate3d(0, -350px, 0);
                }
            }
            
            @keyframes move {
                100% {
                    -webkit-transform: translate3d(0, -350px, 0);
                    transform: translate3d(0, -350px, 0);
                }
            }
        </style>

View Code

但是你問我具體是怎么實現的

哈哈哈哈哈哈哈。。。。。

在火焰 .g-fire 這個 div 內部，用大量的黑色圓形，由下至上，無規律穿過火焰即可。由於濾鏡的融合效果，火焰效果隨之產生

4.文字融合動畫

效果

HTML代碼

<div class="container">
    <h1>Hello World!</h1>
</div>

CSS代碼

<style>            
            .container {
                width: 100%;
                height: 100%;
                position: relative;
                padding: 2em;
                -webkit-filter: contrast(20);
                filter: contrast(20);
                background-color: black;
                overflow: hidden;
            }
            
            h1 {
                font-family: Righteous;
                color: white;
                font-size: 4rem;
                text-transform: uppercase;
                line-height: 1;
                -webkit-animation: letterspacing 5s infinite alternate ease-in-out;
                animation: letterspacing 5s infinite alternate ease-in-out;
                display: block;
                position: absolute;
                left: 50%;
                top: 50%;
                -webkit-transform: translate3d(-50%, -50%, 0);
                transform: translate3d(-50%, -50%, 0);
                letter-spacing: -2.2rem;
            }
            
            @-webkit-keyframes letterspacing {
                0% {
                    letter-spacing: -2.2rem;
                    -webkit-filter: blur(0.3rem);
                    filter: blur(0.3rem);
                }
                50% {
                    -webkit-filter: blur(0.5rem);
                    filter: blur(0.5rem);
                }
                100% {
                    letter-spacing: .5rem;
                    -webkit-filter: blur(0rem);
                    filter: blur(0rem);
                    color: #fff;
                }
            }
            
            @keyframes letterspacing {
                0% {
                    letter-spacing: -2.2rem;
                    -webkit-filter: blur(0.3rem);
                    filter: blur(0.3rem);
                }
                50% {
                    -webkit-filter: blur(0.5rem);
                    filter: blur(0.5rem);
                }
                100% {
                    letter-spacing: .5rem;
                    -webkit-filter: blur(0rem);
                    filter: blur(0rem);
                    color: #fff;
                }
            }
        </style>

View Code

這個效果相對於前兩個要簡單，只需在字體改變字符間距的同時改變模糊度即可

最后，博文的原出處：http://www.cnblogs.com/coco1s/p/7519460.html

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 css3中強大的filter(濾鏡)屬性使用CSS3濾鏡讓圖片反轉顏色 js 控制 css3高級運動 keyframes CSS3高級選擇器利用CSS設置圖片黑白/灰色效果CSS3 filter(濾鏡) 屬性總結CSS3新特性(顏色篇) 總結CSS3新特性(Animation篇) CSS濾鏡之Alpha濾鏡——透明度 CSS3那些不為人知的高級屬性 CSS3那些不為人知的高級屬性