关于前端:使用CSS实现多种Noise噪点效果

52次阅读

共计 10234 个字符，预计需要花费 26 分钟才能阅读完成。

申明：本文波及图文和模型素材仅用于集体学习、钻研和观赏，请勿二次批改、非法流传、转载、出版、商用、及进行其余获利行为。

背景

在插画中增加噪点肌理能够营造出一种天然的气氛。噪点肌理能够用于塑造暗影、高光、深度以及更多细节，并优化插画质感，利用噪点肌理的形式在扁平插画中广受欢迎。

在前端开发过程中，咱们也有可能遇到噪点插画格调的设计稿，利用根底的前端开发常识，能不能实现噪点格调的款式呢，本文次要内容次要就是通过几个示例来实现几种噪点成果。本文蕴含的知识点包含：CSS 属性 mask 遮罩、SVG 滤镜 feTurbulence、CSS 属性 filter 滤镜、CSS 属性 mix-blend-mode 元素混合、CSS 属性 image-rendering 图像缩放等。

开始本文次要内容之前，咱们先来观赏几张设计师在插画作品中利用噪点肌理的优良例子。

作品链接 dribbble.com

作品链接 dribbble.com

作品链接 dribbble.com

常识汇总

PS 实现

在 Photoshop 中减少噪点成果的根底操作方法：

  • 混合模式（溶解）+ 柔和笔刷（做暗灰亮）
  • 增加材质（正片叠底）
  • 图层款式（内暗影，投影等）
  • 噪点笔刷绘制

知识点

本文中将用到以下几个 CSS 个性，正式开发之前先简略理解下。

💡 mask

CSS 属性 mask 容许使用者通过遮罩或者裁切特定区域的图片的形式来暗藏一个元素的局部或者全副可见区域。

根本用法：

// 应用位图来做遮罩
mask: url(mask.png);
// 应用 SVG 图形中的形态来做遮罩
mask: url(masks.svg#star);

🔗 具体用法可拜访：MDN

💡 feTurbulence

在 SVG 中，feTurbulence 滤镜利用 Perlin 噪声函数创立了一个图像。它实现了人造纹理比如说云纹、大理石纹的合成。本文中将利用该滤镜生成噪点背景图片。

🔗 具体用法可拜访：MDN

💡 filter

CSS 属性 filter 将含糊或色彩偏移等图形成果利用于元素。能够为元素增加滤镜成果，本文中次要利用它来加强噪点视觉效果。

🔗 具体用法可拜访：MDN，也可拜访我的另外一篇文章《CSS filter 有哪些神奇用处》，其中有 filter 利用的具体介绍。

💡 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 成果：

🔗 具体用法可拜访：MDN

💡 image-rendering

CSS 属性 image-rendering 用于设置图像缩放算法。它实用于元素自身，实用于元素其余属性中的图像，也利用于子元素。

根本语法：

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

其中：

  • auto：主动，自 Gecko 1.9 起，应用双线性算法进行从新采样。
  • crisp-edges：必须应用可无效保留对比度和图像中的边缘的算法来对图像进行缩放，并且，该算法既不会平滑色彩，又不会在处理过程中为图像引入含糊。
  • pixelated：放大图像时，应用最近街坊算法，因而，图像看着像是由大块像素组成的。放大图像时，算法与 auto 雷同。

🔗 具体用法可拜访：MDN

成果

以下页面是本文实现的多种噪点成果。

  • 👀 在线预览: https://codepen.io/dragonir/full/rNdrmzB
  • 👀 在线预览: https://dragonir.github.io/noise/

实现

定义 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 🌚

通过给 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 🌑

在下面的根底上，通过批改 filter 属性的对比度 contrast 和亮度 brightness，加强噪点成果得对比度。

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

类型 2 🌒

应用 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 🌓

圆形的噪点元素。

<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 🌔

球形的噪点元素，给圆形噪点增加高空暗影和光照成果就能造成平面的球体成果。

<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 🌕

其余 3D 平面形态，包含球体、布丁 🍮、水滴 💧、花瓶 🏺、鸡蛋 🥚、红细胞 💉等，🖱 鼠标悬浮到元素下面能够看到三维旋转成果。

<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 🌝

多个噪点元素地叠加能够生成十分惊艳的成果，比方通过将三个噪点元素层叠在一起能够实现光学三原色 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 🌙

利用噪点元素还能够实现什么呢？核心扩散成果，太阳，涟漪，荷包蛋……

<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>

背景噪点 🌜

如果仔细观察的话，页面彩色背景也利用了噪点成果，是不是有一种黑白电视机的雪花屏复旧感 😂。

<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) }
}

📥 残缺代码：https://github.com/dragonir/noise

总结

本文次要蕴含的知识点包含：

  • CSS 属性 mask 遮罩
  • SVG 滤镜 feTurbulence
  • CSS 属性 filter 滤镜
  • CSS 属性 mix-blend-mode 元素混合
  • CSS 属性 image-rendering 图像缩放

想理解其余前端常识或 WEB 3D 开发技术相干常识，可浏览我往期文章。转载请注明原文地址和作者 。如果感觉文章对你有帮忙，不要忘了 一键三连哦 👍。

附录

  • [1]. 🌊 应用前端技术实现动态图片部分流动成果
  • [2]. 📷 前端实现很哇塞的浏览器端扫码性能
  • [3]. 🌏 前端瓦片地图加载之塞尔达传说旷野之息
  • [4]. 🆒 仅用 CSS 几步实现赛博朋克 2077 格调视觉效果
  • ...
  • [1]. 🌐 应用 Three.js 实现炫酷的赛博朋克格调 3D 数字地球大屏
  • [2]. 🦊 Three.js 实现 3D 凋谢世界小游戏：阿狸的多元宇宙
  • [3]. 🔥 Three.js 火焰成果实现艾尔登法环动静 logo
  • [4]. 🐼 Three.js 实现 2022 冬奥主题 3D 趣味页面，含冰墩墩
  • ...

正文完
前端
发表至： 前端
2022-08-10
 0
关于前端:Vue3相关源码Vue-Router源码解析一
关于前端:零基础教你学前端34表单分组
关于前端:运算符指数链判断Null判断逻辑赋值
关于前端:pnpm-之降本增效