純CSS 毛玻璃效果

蓦然JL發表於2024-03-25
CSS

在一個複雜的背景上新增文字，文字能清晰展示，並儘可能的保留原背景的話，使用毛玻璃的效果去處理是非常合適的。

純CSS 毛玻璃效果

一、背景圖毛玻璃

在 PhotoShop 中，毛玻璃主要使用 高斯模糊 和 羽化 。說白了就是模糊。

在 CSS 中，想要實現模糊效果，可以使用 濾鏡 。背景通常設定成黑色、灰色或者白色，然後再設定一下背景的不透明度就能實現一個簡單的毛玻璃效果。

要實現模糊，我使用的是 backdrop-filter: blur(); 。

在 PhotoShop 中，毛玻璃主要使用 高斯模糊 和 羽化 。說白了就是模糊。

在 CSS 中，想要實現模糊效果，可以使用 濾鏡 。背景通常設定成黑色、灰色或者白色，然後再設定一下背景的不透明度就能實現一個簡單的毛玻璃效果。

要實現模糊，我使用的是 backdrop-filter: blur(); 。

<style>
.box {
  width: 700px;
  height: 700px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url('http://k21vin.gitee.io/front-end-data-visualization/assets/bg01.13dfb262.jpg');
  background-size: 100%;
  background-position: center;
}

.frosted__glass {
  width: 80%;
  height: 40%;
  border-radius: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 60px;
  letter-spacing: 0.5em;
  backdrop-filter: blur(20px);
  color: #fff;
  box-shadow: 0 0 30px 10px rgba(0, 0, 0, .3);
}
</style>

<div class="box">
  <div class="frosted__glass">毛玻璃</div>
</div>

上面的程式碼中，backdrop-filter: blur(20px); 是重點。有了它就實現了毛玻璃的基本效果。

最後加上 box-shadow: 0 0 30px 10px rgba(0, 0, 0, .3); 讓毛玻璃與背景之間產生一點陰影，看起來會更自然。

二、文字毛玻璃

純CSS 毛玻璃效果

文字版的毛玻璃效果其實也是一個模糊效果。

這個案例是滑鼠移入文字時，文字變清晰；滑鼠移出後變模糊。也是 純CSS 可以做出來的。

重點是 text-shadow 的使用

<style>
  div {
    color: rgba(0, 0, 0, 0);
    text-shadow: 0 0 10px #000;
    cursor: default;
    transition: color 0.3s ease, text-shadow 0.3s ease;
  }
  
  div:hover {
    color: rgba(0, 0, 0, 1);
    text-shadow: none;
  }
</style>

<div>毛玻璃</div>

相關文章