使用CSS實現多種Noise噪點效果

語言: CN / TW / HK

宣告:本文涉及圖文和模型素材僅用於個人學習、研究和欣賞,請勿二次修改、非法傳播、轉載、出版、商用、及進行其他獲利行為。

背景

在插畫中新增噪點肌理可以營造出一種自然的氛圍。噪點肌理可以用於塑造陰影、高光、深度以及更多細節,並優化插畫質感,應用噪點肌理的方式在扁平插畫中廣受歡迎。

在前端開發過程中,我們也有可能遇到噪點插畫風格的設計稿,應用基礎的前端開發知識,能不能實現噪點風格的樣式呢,本文主要內容主要就是通過幾個示例來實現幾種噪點效果。本文包含的知識點包括: CSS 屬性 mask 遮罩、 SVG 濾鏡 feTurbulenceCSS 屬性 filter 濾鏡、 CSS 屬性 mix-blend-mode 元素混合、 CSS 屬性 image-rendering 影象縮放等。

開始本文主要內容之前,我們先來欣賞幾張設計師在插畫作品中應用噪點肌理的優秀例子。

作品連結 dribbble.com

作品連結 dribbble.com

作品連結 dribbble.com

知識彙總

PS 實現

Photoshop 中增加噪點效果的基礎操作方法:

  • 混合模式(溶解)+ 柔和筆刷(做暗灰亮)
  • 新增材質(正片疊底)
  • 圖層樣式(內陰影,投影等)
  • 噪點筆刷繪製

知識點

本文中將用到以下幾個 CSS 特性,正式開發之前先簡單瞭解下。

:bulb: mask

CSS 屬性 mask 允許使用者通過遮罩或者裁切特定區域的圖片的方式來隱藏一個元素的部分或者全部可見區域。

基本用法:

// 使用點陣圖來做遮罩
mask: url(mask.png);
// 使用 SVG 圖形中的形狀來做遮罩
mask: url(masks.svg#star);

:link: 詳細用法可訪問: MDN

:bulb: feTurbulence

SVG 中,feTurbulence 濾鏡利用 Perlin 噪聲函式建立了一個影象。它實現了人造紋理比如說雲紋、大理石紋的合成。本文中將利用該濾鏡生成噪點背景圖片。

:link: 詳細用法可訪問: MDN

:bulb: filter

CSS 屬性 filter 將模糊或顏色偏移等圖形效果應用於元素。可以為元素新增濾鏡效果,本文中主要應用它來增強噪點視覺效果。

:link: 詳細用法可訪問: MDN ,也可訪問我的另外一篇文章 《CSS filter 有哪些神奇用途》 ,其中有 filter 應用的詳細介紹。

:bulb: mix-blend-mode

CSS 屬性 mix-blend-mode 描述了元素的內容應該與元素的直系父元素的內容和元素的背景如何混合。

基本語法:

mix-blend-mode: normal;
mix-blend-mode: multiply;
mix-blend-mode: screen;
mix-blend-mode: overlay;
mix-blend-mode: darken;
mix-blend-mode: lighten;
mix-blend-mode: color-dodge
mix-blend-mode: color-burn;
mix-blend-mode: hard-light;
mix-blend-mode: soft-light;
mix-blend-mode: difference;
mix-blend-mode: exclusion;
mix-blend-mode: hue;
mix-blend-mode: saturation;
mix-blend-mode: color;
mix-blend-mode: luminosity;
mix-blend-mode: initial;
mix-blend-mode: inherit;
mix-blend-mode: unset;

不同 mix-blend-mode 效果:

:link: 詳細用法可訪問: MDN

:bulb: image-rendering

CSS 屬性 image-rendering 用於設定影象縮放演算法。它適用於元素本身,適用於元素其他屬性中的影象,也應用於子元素。

基本語法:

image-rendering: auto;
image-rendering: crisp-edges;
image-rendering: pixelated;

其中:

  • auto :自動,自 Gecko 1.9 起,使用雙線性演算法進行重新取樣。
  • crisp-edges :必須使用可有效保留對比度和影象中的邊緣的演算法來對影象進行縮放,並且,該演算法既不會平滑顏色,又不會在處理過程中為影象引入模糊。
  • pixelated :放大影象時,使用最近鄰居演算法,因此,影象看著像是由大塊畫素組成的。縮小影象時,演算法與 auto 相同。

:link: 詳細用法可訪問: MDN

效果

以下頁面是本文實現的多種噪點效果。

實現

定義 CSS 全域性變數。

:root {
  --black: #000000;
  --blue: #0072ff;
  --green: #03c03c;
  --yellow: #fffc00;
  --red: #ff4b2b;
  --orange: #f5af19;
  --pink: #ee9ca7;
  --purple: #a770ef;
}

建立一個 SVG 噪點背景,後續將使用建立的 SVG 元素作為其他元素的噪點背景。

<svg viewBox="0 0 200 200" xmlns='http://www.w3.org/2000/svg'>
  <filter id='noise'>
    <feTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch' />
  </filter>
  <rect width='100%' height='100%' filter='url(#noiseFilter)' />
</svg>

型別0 :new_moon_with_face:

通過給 background 新增 linear-gradient 和噪點圖片背景,就可實現漸變的噪點效果。

<div class="noise_0"></div>
.noise_0 {
  background: linear-gradient(to right bottom, var(--black), rgba(0, 0, 0, 0)), url(#noise);
}

型別1 :new_moon:

在上面的基礎上,通過修改 filter 屬性的對比度 contrast 和亮度 brightness ,增強噪點效果得對比度。

<div class="noise_1"></div>
.noise_1 {
  filter: contrast(200%) brightness(150%);
}

型別2 :waxing_crescent_moon:

使用 mix-blend-mode: multiply 實現混合雙色漸變的噪點效果。

<div class="noise noise_2">
  <div class="isolate">
    <div class="gradient"></div>
    <div class="overlay"></div>
  </div>
</div>
.noise_2 {
  position: relative;
}
.noise_2 .isolate {
  isolation: isolate;
  position: relative;
  width: 100%;
  height: 100%;
}
.noise_2 .overlay {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--purple);
  mix-blend-mode: multiply;
}
.noise_2 .gradient {
  height: 100%;
  width: 100%;
  filter: contrast(200%) brightness(150%);
  background: linear-gradient(to right bottom, var(--black), rgba(0, 0, 0, 0)), url(#noise);
}

型別3 :first_quarter_moon:

圓形的噪點元素。

<div class="noise_3">
  <div class="gradient"></div>
</div>
.noise_3 {
  border-radius: 50%;
}
.noise_3 {
  background: var(--black);
}
.noise_3 .gradient {
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 100% 0, transparent 20%, #cccccc 80%);
  mask: url(#noise), radial-gradient(circle at 100% 0, transparent 10%, #000 60%);
}

型別4 :moon:

球形的噪點元素,給圓形噪點新增地面陰影和光照效果就能形成立體的球體效果。

<div class="noise noise_5">
  <div class="ground"><div class="ground-shadow"></div></div>
  <div class="ball">
    <div class="isolate">
      <div class="ball-shadow"></div>
      <div class="ball-light"></div>
    </div>
  </div>
</div>
<style>
.noise_5 {
  position: relative;
}
.noise_5 .ball {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  border-radius: 50%;
  overflow: hidden;
  z-index: 20;
}
.noise_5 .isolate {
  isolation: isolate;
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
}
.noise_5 .ball-shadow {
  height: 100%;
  background: radial-gradient(circle at 65% 35%, rgba(0, 0, 0, 0), mediumblue), url(#noise);
  filter: contrast(120%) brightness(900%);
}
.noise_5 .ground {
  position: absolute;
  width: 150%;
  height: 140px;
  bottom: -10px;
  left: -65%;
  transform: rotateZ(7deg);
  mix-blend-mode: multiply;
}
.noise_5 .ground-shadow {
  width: 95%;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 70%, navy, rgba(0, 0, 0, 0)), url(#noise);
  filter: contrast(150%) brightness(700%);
}
.noise_5 .ball-light {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: multiply;
  background: radial-gradient(circle at 67% 30%, #ccc, var(--black));
}
</style>

型別5 :full_moon:

其他 3D 立體形狀,包括球體、布丁 :custard: 、水滴 :droplet: 、花瓶 、雞蛋 、紅細胞 :syringe: 等, 滑鼠懸浮到元素上面可以看到三維旋轉效果。

<div class="item item--sphere item--color1"></div>
<div class="item item--pudding item--color5"></div>
<div class="item item--droplet item--color6"></div>
<div class="item item--vase item--color7"></div>
<div class="item item--egg item--color8"></div>
<div class="item item--cell"></div>
.item {
  background-color: #ffecd2;
  box-shadow: -5px 18px 25px -15px;
  overflow: hidden;
  transition: all 0.2s ease-out;
  image-rendering: pixelated;
}
.item::before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  height: 100%;
  width: 400%;
  mask: url(#noise), radial-gradient(circle at 50% 0, transparent 5%, #000 80%) 0 0/50% 100%;
}
.item:hover {
  transform: scale(1.05);
}
.item:hover.item::before, .item:hover.item::after {
  animation: spin-round 3.5s linear infinite;
}
.item:active {
  animation: hue-rotate 7s infinite;
}
.item--sphere {
  border-radius: 50%;
}
.item--egg {
  width: 100.1px;
  border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;
}
.item--pudding {
  width: 130px;
  height: 130px;
  border-radius: 50% 50% 10% 10%;
}
.item--pudding::after {
  content: "";
  position: absolute;
  top: 0;
  display: block;
  top: 0;
  left: 0;
  height: 100%;
  width: 400%;
  mask: url(#noise), radial-gradient(circle at 50% 0, transparent 55%, #000 85%) 0 0/50% 100%;
}
.item--droplet {
  width: 100.1px;
  height: 100.1px;
  border-radius: 5% 100% 50% 65%/5% 65% 50% 100%;
  transform: rotate(45deg);
  box-shadow: 5px 18px 25px -15px;
}
.item--droplet:hover {
  transform: rotate(45deg) scale(1.05);
}
.item--vase {
  position: relative;
  width: 80px;
  height: 130px;
  border-radius: 40% 40% 70% 70%/100%;
}
.item--vase::after {
  content: "";
  position: absolute;
  top: 0;
  display: block;
  top: 0;
  left: 0;
  height: 100%;
  width: 400%;
  mask: url(#noise), radial-gradient(circle at 50% 0, transparent 55%, #000 90%) 0 0/50% 100%;
}
.item--cell {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  color: #ff4d5d;
  background: radial-gradient(circle at 100% 0, #ffa878 5%, transparent 75%), #ff4d5d;
}
.item--cell::before {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle at 0 75%, transparent 20%, #98000e 65%);
  mask: url(#noise), radial-gradient(circle at 50%, transparent 25%, #000 75%);
}
.item--cell:hover {
  animation: spin-flat-thick 3.5s linear infinite;
}
.item--cell:hover.item--cell::before {
  animation: spin-flat 3.5s linear infinite;
}
.item--cell:hover:active {
  animation: spin-flat-thick 3.5s linear infinite, hue-rotate 7s linear infinite;
}
.item--color1 {
  color: #7f5fff;
}
.item--color1::before {
  background: repeat-x 100% 0/50% 100% radial-gradient(circle at 50% 0, transparent 25%, #7f5fff 65%);
}
.item--color5 {
  color: #3d1635;
  background-color: #ffecd2;
}
.item--color5::before {
  background: repeat-x 100% 0/50% 100% radial-gradient(circle at 50% 0, transparent 15%, #e7627d 45%);
}
.item--color5::after {
  background: repeat-x 100% 0/50% 100% radial-gradient(circle at 50% 0, transparent 50%, #3d1635 75%);
}
.item--color6 {
  background-color: #72f9c1;
  color: #5193ff;
}
.item--color6::before {
  background: repeat-x 100% 0/50% 100% radial-gradient(circle at 50% 0, transparent 25%, #5193ff 65%);
}
.item--color7 {
  color: #5e21d6;
  background-color: #fec440;
}
.item--color7::before {
  background: repeat-x 100% 0/50% 100% radial-gradient(circle at 50% 0, transparent 15%, #fd2472 45%);
}
.item--color7::after {
  background: repeat-x 100% 0/50% 100% radial-gradient(circle at 50% 0, transparent 50%, #5e21d6 75%);
}
.item--color8 {
  color: #222;
}
.item--color8::before {
  background: repeat-x 100% 0/50% 100% radial-gradient(circle at 50% 0, transparent 25%, #222 65%);
}

型別6 :full_moon_with_face:

多個噪點元素地疊加可以生成非常驚豔的效果,比如通過將三個噪點元素層疊在一起可以實現光學三原色 RGB 效果。

<div class="noise_6">
  <div class="circle noise-1"></div>
  <div class="circle noise-2"></div>
  <div class="circle noise-3"></div>
</div>
.noise_6 .circle {
  filter: contrast(145%) brightness(650%) invert(100%);
  mix-blend-mode: screen;
}
.noise_6 .noise-1 {
  position: absolute;
  top: 0;
  left: -10%;
  background: radial-gradient(circle at 50% 50%, rgba(0,255,255,1), rgba(0,0,0,0)), url(#noise);
}
.noise_6 .noise-2 {
  position: absolute;
  left: 10%;
  top: -30px;
  background: radial-gradient(circle at 50% 50%, rgba(255,0,255,1), rgba(0,0,0,0)), url(#noise);
}
.noise_6 .noise-3 {
  position: absolute;
  top: 50px;
  left: 4%;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,0,1), rgba(0,0,0,0)), url(#noise);
}

型別7 :crescent_moon:

利用噪點元素還可以實現什麼呢?中心擴散效果,太陽,漣漪,荷包蛋……

<div class="noise_7">
  <div class="noise"></div>
  <div class="center">
    <div class="circle">
    </div>
  </div>
</div>
<style>
.noise_7 {
  position: relative;
  width: 1000px;
  height: 1000px;
  margin: 0 auto;
}
.noise_7 .noise {
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)), url(#noise);
  filter: contrast(145%) brightness(650%) invert(100%);
  mix-blend-mode: screen;
}
.noise_7 .center {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.noise_7 .circle {
  width: 200px;
  height: 200px;
  background-color: beige;
  border-radius: 50%;
}
</style>

背景噪點 :last_quarter_moon_with_face:

如果仔細觀察的話,頁面黑色背景也應用了噪點效果,是不是有一種黑白電視機的雪花屏復古感 :joy:

<div class="bg"></div>
.bg {
  position: fixed;
  top: -50%;
  left: -50%;
  right: -50%;
  bottom: -50%;
  width: 200%;
  height: 200vh;
  background: transparent url(#noise) repeat 0 0;
  background-repeat: repeat;
  animation: bg-animation .2s infinite;
  opacity: .9;
  visibility: visible;
}
@keyframes bg-animation {
  0% { transform: translate(0,0) }
  10% { transform: translate(-5%,-5%) }
  20% { transform: translate(-10%,5%) }
  30% { transform: translate(5%,-10%) }
  40% { transform: translate(-5%,15%) }
  50% { transform: translate(-10%,5%) }
  60% { transform: translate(15%,0) }
  70% { transform: translate(0,10%) }
  80% { transform: translate(-15%,0) }
  90% { transform: translate(10%,5%) }
  100% { transform: translate(5%,0) }
}

:inbox_tray: 完整程式碼: https://github.com/dragonir/noise

總結

本文主要包含的知識點包括:

  • CSS 屬性 mask 遮罩
  • SVG 濾鏡 feTurbulence
  • CSS 屬性 filter 濾鏡
  • CSS 屬性 mix-blend-mode 元素混合
  • CSS 屬性 image-rendering 影象縮放

想了解其他前端知識或 WEB 3D 開發技術相關知識,可閱讀我往期文章。 轉載請註明原文地址和作者 。如果覺得文章對你有幫助,不要忘了 一鍵三連哦 :+1:

附錄