b站全灰，但我一下把它弄回來了——css 濾鏡
- 2019 年 12 月 17 日
- 筆記
前言
今天(12月13日)是國家公祭日?️?
今天打開b站，看見一片灰色。
首先，職業下意識就打開了控制台。為什麼呢？是想看看怎麼實現的，是css自定義屬性嗎？是引入一份css嗎？是預處理器修改全局變數嗎？結果，打開控制台，瀏覽了一下，最後定位發現在於一行css程式碼，關掉就變成彩色了
filter: grayscale(100%);
於是乎，我們馬上來看看filter這個濾鏡效果具體還有什麼值可選
效果預覽
趕緊的，寫個腳本遍歷所有的屬性，並都看看效果：
const url = "https://www.baidu.com/img/[email protected]"; let html = ""; [ { name: "灰度100%", style: "grayscale(100%)" }, { name: "模糊5px", style: "blur(5px)" }, { name: "3倍亮度", style: "brightness(300%)" }, { name: "200%對比度", style: "contrast(200%)" }, { name: "200%飽和度", style: "saturate(200%)" }, { name: "色相旋轉180度", style: "hue-rotate(180deg)" }, { name: "100%反色", style: "invert(100%)" }, { name: "50%透明度", style: "opacity(50%)" }, { name: "陰影", style: "drop-shadow(10px 5px 5px #f00)" }, { name: "100%透明度", style: "opacity(100%)" }, { name: "褐色程度70%", style: "sepia(70%)" } ].forEach(({ name, style }) => { html += `<div>${name}-${style}: <img src=${url} style="filter: ${style}" /></div><br />`; }); document.body.innerHTML = html; 複製程式碼
預覽效果：
可支援多個濾鏡結合哦
開始發揮想像力
毛玻璃效果
看見模糊的效果，是不是馬上就想到mac上炫酷的毛玻璃效果。於是，我們來複現一下：
實現方法：先鋪滿全螢幕背景，然後承載主要內容的元素半透明，且有一個偽元素，此偽元素也是有一個background-attachment: fixed的背景，並且把它加上blur即可實現
.bg, .container::before { background-image: url("http://img2.imgtn.bdimg.com/it/u=1737072847,1699534261&fm=26&gp=0.jpg"); background-repeat: no-repeat; background-size: cover; background-attachment: fixed; } .bg { top: 0; left: 0; right: 0; bottom: 0; position: absolute; z-index: -1; } .container::before { content: ""; filter: blur(20px); z-index: -1; } .container { background: rgba(0, 0, 0, 0.5); color: #fff; font-size: 30px; /* 用transform會悲劇哦 */ left: calc(50% - 250px); top: calc(50% - 200px); } .container, .container::before { width: 500px; height: 400px; position: absolute; border-radius: 8px; }
- background-attachment: fixed。這個可以使得背景相對於視窗是固定的，否則一般情況下，圖片會從你的盒子左上角開始，而不是像圖中的效果一樣
- calc(50% – 250px)居中: 使用transform的話，偏移會導致偽元素的背景和內容不統一，調起來也麻煩，直接calc最快
剩下html程式碼就很簡單了：
<main class="bg"></main> <section class="container"> i am lhyt </section> 複製程式碼
模糊陰影
平時可能多數是使用box-shadow實現一個簡單的陰影，但是blur也可以哦。在一張圖下面，還是放這張圖，然後加上blur模糊，再偏移一點點，不就是一個陰影了(彩色陰影哦)
.shadow, .shadow::before { width: 500px; height: 400px; background: url("http://img2.imgtn.bdimg.com/it/u=1737072847,1699534261&fm=26&gp=0.jpg") no-repeat; background-size: cover; } .shadow { position: relative; } .shadow::before { content: ""; display: block; position: absolute; filter: blur(20px); z-index: -1; top: 20px; left: 20px; }
如果fliter再加上brightness(0.5)，那就是一個黑色陰影了。html就只有一個元素，沒什麼好說的。
自動顏色逐漸變化
還記得windows的一些屏保嗎，它們的顏色一直在改變。通過色相旋轉hue-rotate，css濾鏡也可以實現這個效果
@keyframes auto_change_color { from { filter: hue-rotate(0); } to { filter: hue-rotate(360deg); } } .container { background-image: url("http://img2.imgtn.bdimg.com/it/u=1737072847,1699534261&fm=26&gp=0.jpg"); background-repeat: no-repeat; background-size: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; animation: auto_change_color 5s linear infinite; }
從抽象到具象
通過修改前面的模糊度，加上一些偏移、對比度變化動畫，可以實現一個圖片拼接且逐漸從抽象到具象的效果：
@keyframes shadow_move { from { top: 400px; left: 400px; filter: blur(20px); } to { top: 0; left: -250px; filter: blur(0); } } @keyframes container_move { from { top: 0; filter: blur(20px); left: 0; } to { top: 200px; left: 400px; filter: blur(0); } } @keyframes body_contrast { from { filter: contrast(20); } to { filter: contrast(1); } } .shadow, .shadow::before { width: 250px; height: 400px; background: url("http://img2.imgtn.bdimg.com/it/u=1737072847,1699534261&fm=26&gp=0.jpg") no-repeat; background-size: cover; } .shadow { position: relative; animation: container_move 20s infinite ease; background-position-x: -250px; } .shadow::before { content: ""; display: block; position: absolute; z-index: -1; animation: shadow_move 20s infinite ease; } body { animation: body_contrast 20s infinite ease; }
閃電
平時生活中的閃電，一般是從一股很細的光到一股很粗的電光。這個過程，使用brightness可以模擬。下面我們做一個閃電劈下來的效果
@keyframes lighting { from { filter: brightness(0); } to { filter: brightness(100%); } } @keyframes light { from { filter: brightness(100%); } to { filter: brightness(300%); } } .light { background: url("https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3951629719,2497770173&fm=26&gp=0.jpg") no-repeat; width: 463px; height: 400px; animation: lighting 0.5s linear infinite; } .container { background-image: url("http://img0.imgtn.bdimg.com/it/u=2309502909,4210960075&fm=26&gp=0.jpg"); background-repeat: no-repeat; background-size: cover; width: 300px; height: 300px; animation: light 0.5s linear infinite; position: absolute; left: 250px; }
html:
<body> <section style="filter: contrast(20); background-color: #000"> <div class="light"></div> </section> <section style="filter: contrast(20); background-color: #000"> <div class="container"></div> </section> </body> 複製程式碼
