返回

不仅仅是静态效果，CSS实现多种Noise噪点效果

前端

在前端开发过程中，我们也有可能遇到噪点插画风格的设计稿，本文主要内容主要就是通过几个示例来实现几种噪点效果。本文包含的知识点包括：CSS 属性 mask 遮罩、SVG 滤镜 feTurbulence、CSS 滤镜 backdrop-filter、CSS 变量、CSS 过渡动画和 JavaScript。

静态噪点效果

静态噪点效果是最简单的噪点效果，只需要使用 CSS 属性 mask 遮罩和一张噪点图片即可实现。具体步骤如下：

  1. 准备一张噪点图片，噪点图片的尺寸和形状可以根据需要自行选择。
  2. 将噪点图片放在项目目录中，并使用 CSS 属性 mask 遮罩将噪点图片应用到元素上。
.noise {
  mask-image: url(noise.png);
}

动态噪点效果

动态噪点效果是在静态噪点效果的基础上，通过 CSS 过渡动画让噪点图片不断变化，从而实现动态噪点效果。具体步骤如下：

  1. 准备多张噪点图片，噪点图片的尺寸和形状可以根据需要自行选择。
  2. 将噪点图片放在项目目录中，并使用 CSS 属性 mask 遮罩将噪点图片应用到元素上。
  3. 使用 CSS 过渡动画让噪点图片不断变化，从而实现动态噪点效果。
.noise {
  mask-image: url(noise1.png);
  animation: noise-animation 10s infinite alternate;
}

@keyframes noise-animation {
  0% {
    mask-image: url(noise1.png);
  }
  25% {
    mask-image: url(noise2.png);
  }
  50% {
    mask-image: url(noise3.png);
  }
  75% {
    mask-image: url(noise4.png);
  }
  100% {
    mask-image: url(noise5.png);
  }
}

渐变噪点效果

渐变噪点效果是在静态噪点效果的基础上，通过 CSS 滤镜 backdrop-filter 让噪点图片产生渐变效果，从而实现渐变噪点效果。具体步骤如下：

  1. 准备一张噪点图片，噪点图片的尺寸和形状可以根据需要自行选择。
  2. 将噪点图片放在项目目录中，并使用 CSS 属性 mask 遮罩将噪点图片应用到元素上。
  3. 使用 CSS 滤镜 backdrop-filter 让噪点图片产生渐变效果，从而实现渐变噪点效果。
.noise {
  mask-image: url(noise.png);
  backdrop-filter: blur(10px) brightness(1.5);
}

颜色噪点效果

颜色噪点效果是在静态噪点效果的基础上，通过 CSS 变量和 JavaScript 让噪点图片的颜色不断变化，从而实现颜色噪点效果。具体步骤如下：

  1. 准备一张噪点图片，噪点图片的尺寸和形状可以根据需要自行选择。
  2. 将噪点图片放在项目目录中，并使用 CSS 属性 mask 遮罩将噪点图片应用到元素上。
  3. 使用 CSS 变量和 JavaScript 让噪点图片的颜色不断变化，从而实现颜色噪点效果。
:root {
  --noise-color: #000;
}

.noise {
  mask-image: url(noise.png);
  background-color: var(--noise-color);
}

const noiseElement = document.querySelector('.noise');

setInterval(() => {
  const randomColor = `rgb(${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)})`;
  noiseElement.style.setProperty('--noise-color', randomColor);
}, 1000);

以上就是通过 CSS 实现多种噪点效果的方法。这些效果可以用于各种设计项目中，如网页设计、UI 设计和插画设计等。希望本文对您有所帮助。