前言
我們?cè)谔幚韴D片時(shí)秘豹，經(jīng)常使用的一個(gè)功能就是濾鏡携御，它能使一張圖像呈現(xiàn)各種不同的視覺(jué)效果。
在 CSS 中既绕，也有一個(gè)filter屬性啄刹，讓我們能用 CSS 代碼為元素指定各種濾鏡效果，比如模糊凄贩、灰度誓军、明暗度、顏色偏移等疲扎。
CSS filter的基礎(chǔ)使用非常簡(jiǎn)單昵时，CSS 標(biāo)準(zhǔn)里包含了一些已實(shí)現(xiàn)預(yù)定義效果的函數(shù)（下面blur、brightness评肆、contrast等）债查，我們可以通過(guò)指定這些函數(shù)的值來(lái)實(shí)現(xiàn)想要的效果：
/* 使用單個(gè)濾鏡 （如果傳入的參數(shù)是百分?jǐn)?shù)，那么也可以傳入對(duì)應(yīng)的小數(shù)：40% --> 0.4）*/
filter: blur(5px);
filter: brightness(40%);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);
/* 使用多個(gè)濾鏡 */
filter: contrast(175%) brightness(3%);
/* 不使用任何濾鏡 */
filter: none;
官方demo：[圖片上傳中...(image.png-63c160-1630553219734-0)]
濾鏡在日常開(kāi)發(fā)中是很常見(jiàn)的瓜挽，比如使用drop-shadow給不規(guī)則形狀添加陰影盹廷；使用blur來(lái)實(shí)現(xiàn)背景模糊，以及毛玻璃效果等久橙。
下面我們將進(jìn)一步使用CSS filter實(shí)現(xiàn)一些動(dòng)畫(huà)效果俄占，讓網(wǎng)站交互更加酷炫，同時(shí)也加深對(duì)CSS filter的理解淆衷。一起開(kāi)始吧缸榄！
（ 下面要使用到的 動(dòng)畫(huà) 和 偽類(lèi) 知識(shí)，在 CSS的N個(gè)編碼技巧 中都有詳細(xì)的介紹祝拯，這里就不重復(fù)了甚带，有需要的朋友可以前往查看哦。 ）
電影效果
濾鏡中的brightness用于調(diào)整圖像的明暗度佳头。默認(rèn)值是1鹰贵；小于1時(shí)圖像變暗，為0時(shí)顯示為全黑圖像康嘉；大于1時(shí)圖像顯示比原圖更明亮碉输。
我們可以通過(guò)調(diào)整 背景圖的明暗度 和 文字的透明度 ，來(lái)模擬電影謝幕的效果亭珍。
[圖片上傳失敗...(image-65b56c-1630551385556)]
<div class="container">
<div class="pic"></div>
<div class="text">
<p>如果生活中有什么使你感到快樂(lè)敷钾，那就去做吧</p>
<br>
<p>不要管別人說(shuō)什么</p>
</div>
</div>
.pic{
height: 100%;
width: 100%;
position: absolute;
background: url('./images/movie.webp') no-repeat;
background-size: cover;
animation: fade-away 2.5s linear forwards; //forwards當(dāng)動(dòng)畫(huà)完成后枝哄，保持最后一幀的狀態(tài)
}
.text{
position: absolute;
line-height: 55px;
color: #fff;
font-size: 36px;
text-align: center;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
opacity: 0;
animation: show 2s cubic-bezier(.74,-0.1,.86,.83) forwards;
}
@keyframes fade-away { //背景圖的明暗度動(dòng)畫(huà)
30%{
filter: brightness(1);
}
100%{
filter: brightness(0);
}
}
@keyframes show{ //文字的透明度動(dòng)畫(huà)
20%{
opacity: 0;
}
100%{
opacity: 1;
}
}
模糊效果
在下面的單詞卡片中，當(dāng)鼠標(biāo)hover到某一張卡片上時(shí)阻荒，其他卡片背景模糊挠锥，使用戶(hù)焦點(diǎn)集中到當(dāng)前卡片。
[圖片上傳失敗...(image-82c08b-1630551385556)]
html結(jié)構(gòu)：
<ul class="cards">
<li class="card">
<p class="title">Flower</p>
<p class="content">The flowers mingle to form a blaze of color.</p>
</li>
<li class="card">
<p class="title">Sunset</p>
<p class="content">The sunset glow tinted the sky red.</p>
</li>
<li class="card">
<p class="title">Plain</p>
<p class="content">The winds came from the north, across the plains, funnelling down the valley. </p>
</li>
</ul>
實(shí)現(xiàn)的方式侨赡，是將背景加在.card元素的偽類(lèi)上瘪贱，當(dāng)元素不是焦點(diǎn)時(shí)，為該元素的偽類(lèi)加上濾鏡辆毡。
.card:before{
z-index: -1;
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
border-radius: 20px;
filter: blur(0px) opacity(1);
transition: filter 200ms linear, transform 200ms linear;
}
/*
這里不能將濾鏡直接加在.card元素，而是將背景和濾鏡都加在偽類(lèi)上甜害。
因?yàn)椴耙矗冈丶恿藶V鏡，它的子元素都會(huì)一起由該濾鏡改變尔店。
如果濾鏡直接加在.card元素上眨攘，會(huì)導(dǎo)致上面的文字也變模糊。
*/
//通過(guò)css選擇器選出非hover的.card元素嚣州，給其偽類(lèi)添加模糊鲫售、透明度和明暗度的濾鏡
.cards:hover > .card:not(:hover):before{
filter: blur(5px) opacity(0.8) brightness(0.8);
}
//對(duì)于hover的元素，其偽類(lèi)增強(qiáng)飽和度该肴，尺寸放大
.card:hover:before{
filter: saturate(1.2);
transform: scale(1.05);
}
褪色效果
褪色效果可以打造出一種懷舊的風(fēng)格情竹。下面這組照片墻，我們通過(guò)sepia濾鏡將圖像基調(diào)轉(zhuǎn)換為深褐色匀哄，再通過(guò)降低 飽和度saturate 和 色相旋轉(zhuǎn)hue-rotate 微調(diào)秦效，模擬老照片的效果。
[圖片上傳失敗...(image-80fcbc-1630551385556)]
.pic{
border: 3px solid #fff;
box-shadow: 0 10px 50px #5f2f1182;
filter: sepia(30%) saturate(40%) hue-rotate(5deg);
transition: transform 1s;
}
.pic:hover{
filter: none;
transform: scale(1.2) translateX(10px);
z-index: 1;
}
灰度效果
怎樣讓網(wǎng)站變成灰色涎嚼？在html元素上加上filter: grayscale(100%)即可阱州。
grayscale(amount)函數(shù)將改變輸入圖像灰度。amount 的值定義了灰度轉(zhuǎn)換的比例法梯。值為 100% 則完全轉(zhuǎn)為灰度圖像苔货，值為 0% 圖像無(wú)變化。若未設(shè)置值立哑，默認(rèn)值是 0夜惭。
[圖片上傳失敗...(image-c7f7f7-1630551385556)]
融合效果
要使兩個(gè)相交的元素產(chǎn)生下面這種融合的效果，需要用到的濾鏡是blur和contrast刁憋。
[圖片上傳失敗...(image-80e083-1630551385556)]
<div class="container">
<div class="circle circle-1"></div>
<div class="circle circle-2"></div>
</div>
.container{
margin: 50px auto;
height: 140px;
width: 400px;
background: #fff; //給融合元素的父元素設(shè)置背景色
display: flex;
align-items: center;
justify-content: center;
filter: contrast(30); //給融合元素的父元素設(shè)置contrast
}
.circle{
border-radius: 50%;
position: absolute;
filter: blur(10px); //給融合元素設(shè)置blur
}
.circle-1{
height: 90px;
width: 90px;
background: #03a9f4;
transform:nslate(-50px);
animation: 2s moving linear infinite alternate-reverse;
}
.circle-2{
height: 60px;
width: 60px;
background: #0000ff;
transform: translate(50px);
animation: 2s moving linear infinite alternate;
}
@keyframes moving { //兩個(gè)元素的移動(dòng)
0%{
transform: translate(50px)
}
100%{
transform: translate(-50px)
}
}
實(shí)現(xiàn)融合效果的技術(shù)要點(diǎn)：
-
contrast濾鏡應(yīng)用在融合元素的父元素（.container）上滥嘴，且父元素必須設(shè)置background。 -
blur濾鏡應(yīng)用在融合元素（.circle）上至耻。
blur設(shè)置圖像的模糊程度若皱，contrast設(shè)置圖像的對(duì)比度镊叁。當(dāng)兩者像上面那樣組合時(shí)，就會(huì)產(chǎn)生神奇的融合效果走触，你可以像使用公式一樣使用這種寫(xiě)法晦譬。
在這種融合效果的基礎(chǔ)上，我們可以做一些有趣的交互設(shè)計(jì)互广。
- 加載動(dòng)畫(huà)：
[圖片上傳失敗...(image-613846-1630551385556)]
html和css如下所示敛腌，這個(gè)動(dòng)畫(huà)主要通過(guò)控制子元素.circle的尺寸和位移來(lái)實(shí)現(xiàn)，但是由于父元素和子元素都滿(mǎn)足 “融合公式” 惫皱，所以當(dāng)子元素相交時(shí)像樊，就出現(xiàn)了融合的效果。
<div class="container">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
.container {
margin: 10px auto;
height: 140px;
width: 300px;
background: #fff; //父元素設(shè)置背景色
display: flex;
align-items: center;
filter: contrast(30); //父元素設(shè)置contrast
}
.circle {
height: 50px;
width: 60px;
background: #1aa7ff;
border-radius: 50%;
position: absolute;
filter: blur(20px); //子元素設(shè)置blur
transform: scale(0.1);
transform-origin: left top;
}
.circle{
animation: move 4s cubic-bezier(.44,.79,.83,.96) infinite;
}
.circle:nth-child(2) {
animation-delay: .4s;
}
.circle:nth-child(3) {
animation-delay: .8s;
}
.circle:nth-child(4) {
animation-delay: 1.2s;
}
.circle:nth-child(5) {
animation-delay: 1.6s;
}
@keyframes move{ //子元素的位移和尺寸動(dòng)畫(huà)
0%{
transform: translateX(10px) scale(0.3);
}
45%{
transform: translateX(135px) scale(0.8);
}
85%{
transform: translateX(270px) scale(0.1);
}
}
- 酷炫的文字出場(chǎng)方式：
[圖片上傳失敗...(image-a3370a-1630551385556)]
主要通過(guò)不斷改變letter-spacing和blur的值旅敷，使文字從融合到分開(kāi)：
<div class="container">
<span class="text">fantastic</span>
</div>
.container{
margin-top: 50px;
text-align: center;
background-color: #000;
filter: contrast(30);
}
.text{
font-size: 100px;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
letter-spacing: -40px;
color: #fff;
animation: move-letter 4s linear forwards; //forwards當(dāng)動(dòng)畫(huà)完成后生棍，保持最后一幀的狀態(tài)
}
@keyframes move-letter{
0% {
opacity: 0;
letter-spacing: -40px;
filter: blur(10px);
}
25% {
opacity: 1;
}
50% {
filter: blur(5px);
}
100% {
letter-spacing: 20px;
filter: blur(2px);
}
}
水波效果
filter還可以通過(guò) URL 鏈接到 SVG 濾鏡元素，SVG濾鏡元素MDN
下面的水波紋效果就是基于 SVG 的feTurbulence濾鏡實(shí)現(xiàn)的媳谁，原理參考了 說(shuō)說(shuō)SVG的feTurbulence濾鏡 和 SVG feTurbulence濾鏡深入介紹涂滴，有興趣的朋友可以深入閱讀。
feTurbulence濾鏡借助Perlin噪聲算法模擬自然界真實(shí)事物那樣的隨機(jī)樣式晴音。它接收下面5個(gè)屬性：
-
baseFrequency表示噪聲的基本頻率參數(shù)柔纵，頻率越高，噪聲越密集锤躁。 -
numOctaves就表示倍頻的數(shù)量搁料，倍頻的數(shù)量越多，噪聲看起來(lái)越自然系羞。 -
seed屬性表示feTurbulence濾鏡效果中偽隨機(jī)數(shù)生成的起始值加缘，不同數(shù)量的seed不會(huì)改變?cè)肼暤念l率和密度，改變的是噪聲的形狀和位置觉啊。 -
stitchTiles定義了Perlin噪聲在邊框處的行為表現(xiàn)拣宏。 -
type屬性值有fractalNoise和turbulence，模擬隨機(jī)樣式使用turbulence杠人。
[圖片上傳失敗...(image-6a959b-1630551385556)]
在這個(gè)例子勋乾，兩個(gè)img標(biāo)簽使用同一張圖片，將第二個(gè)img標(biāo)簽使用scaleY(-1)實(shí)現(xiàn)垂直方向的鏡像翻轉(zhuǎn)嗡善，模擬倒影辑莫。
并且，對(duì)倒影圖片使用feTurbulence濾鏡罩引，通過(guò)動(dòng)畫(huà)不斷改變feTurbulence濾鏡的baseFrequency值實(shí)現(xiàn)水紋波動(dòng)的效果各吨。
<div class="container">
<img src="images/moon.jpg">
<img src="images/moon.jpg" class="reflect">
</div>
<!--定義svg濾鏡，這里使用的是feTurbulence濾鏡-->
<svg width="0" height="0">
<filter id="displacement-wave-filter">
<!--baseFrequency設(shè)置0.01 0.09兩個(gè)值袁铐，代表x軸和y軸的噪聲頻率-->
<feTurbulence baseFrequency="0.01 0.09">
<!--這是svg動(dòng)畫(huà)的定義方式揭蜒，通過(guò)動(dòng)畫(huà)不斷改變baseFrequency的值横浑，從而形成波動(dòng)效果-->
<animate attributeName="baseFrequency"
dur="20s" keyTimes="0;0.5;1" values="0.01 0.09;0.02 0.13;0.01 0.09"
repeatCount="indefinite" ></animate>
</feTurbulence>
<feDisplacementMap in="SourceGraphic" scale="10" />
</filter>
</svg>
.container{
height: 520px;
width: 400px;
display: flex;
clip-path: inset(10px);
flex-direction: column;
}
img{
height: 50%;
width: 100%;
}
.reflect {
transform: translateY(-2px) scaleY(-1);
//對(duì)模擬倒影的元素應(yīng)用svg filter
//url中對(duì)應(yīng)的是上面svg filter的id
filter: url(#displacement-wave-filter);
}
抖動(dòng)效果
在上面的水波動(dòng)畫(huà)中改變的是baseFrequency值，我們也通過(guò)改變seed的值屉更，實(shí)現(xiàn)文字的抖動(dòng)效果徙融。 [圖片上傳失敗...(image-974288-1630551385556)]
<div>
<p class="shaky">Such a joyful night!</p>
</div>
<svg width="0" height="0">
<filter id="displacement-text-filter">
<!--定義feTurbulence濾鏡-->
<feTurbulence baseFrequency="0.02" seed="0">
<!--這是svg動(dòng)畫(huà)的定義方式，通過(guò)動(dòng)畫(huà)不斷改變seed的值瑰谜，形成抖動(dòng)效果-->
<animate attributeName="seed"
dur="1s" keyTimes="0;0.5;1" values="1;2;3"
repeatCount="indefinite" ></animate>
</feTurbulence>
<feDisplacementMap in="SourceGraphic" scale="10" />
</filter>
</svg>
.shaky{
font-size: 60px;
filter: url(#displacement-text-filter); //url中對(duì)應(yīng)的是上面svg filter的id
}
