b站全灰，原來僅需一行css代碼——css 濾鏡

時間 2019-12-16

標籤原來一行 css 代碼欄目 CSS 简体版

原文原文鏈接

前言

(12月13日)是國家公祭日🕯️🙏css

今天打開b站，看見一片灰色。對於公祭日，咱們每個人都應該爲此默哀、記念歷史，都要銘記歷史、熱愛祖國、砥礪前行html

下面，在技術的角度上，研究一下這塊全灰是怎麼實現的前端

首先，職業下意識就打開了控制檯。爲何呢？是想看看怎麼實現的，是css自定義屬性嗎？是引入一份css嗎？是預處理器修改全局變量嗎？結果，打開控制檯，瀏覽了一下，最後定位發如今於一行css代碼，關掉就變成彩色了windows

filter: grayscale(100%);
複製代碼

因而乎，咱們立刻來看看filter這個濾鏡效果具體還有什麼值可選。學習

效果預覽

趕忙的，寫個腳本遍歷全部的屬性，並都看看效果：動畫

const url = "https://www.baidu.com/img/baidu_resultlogo@2.png";
    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;
複製代碼

預覽效果： ui

可支持多個濾鏡結合哦url

開始發揮想象力

毛玻璃效果

看見模糊的效果，是否是立刻就想到mac上炫酷的毛玻璃效果。因而，咱們來複現一下：spa

實現方法：先鋪滿全屏背景，而後承載主要內容的元素半透明，且有一個僞元素，此僞元素也是有一個background-attachment: fixed的背景，而且把它加上blur便可實現3d

.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>
複製代碼