[CSS]노이즈 이펙트를 활용한 분위기 연출

 

 

HTML

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap" rel="stylesheet">

<div class="wrap">
  <p>' TEXT INPUT '</p>
</div>
<div class="noise"></div>

 

 

CSS

div.wrap {
  width: 100%;
  height: 40vh;
  background-color: #2d2d2d;
}
div.wrap p {
  color: #fff;
  font-size: 40px;
  text-align: center;
  line-height: 40vh;
  font-family: 'Poppins', sans-serif;
}
.noise {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1001;
  background-image: url('https://i.ibb.co/x3TCktM/645cbb8ec449398255b76326-noise.gif');
  background-position: 0 0;
  background-size: auto;
  pointer-events: none;
  opacity: 0.05;
  transition: opacity .2s cubic-bezier(.445, .05, .55, .95); 
  visibility: visible;
/*   원본 페이지 : https://www.rawlab.co */
}

 

 

Codepen

See the Pen [HTML/CSS]노이즈 이펙트 by TytanLee (@TytanLee) on CodePen.

 

배경에 노이즈 이펙트 GIF 파일을 이용해서 약간의 앤틱한 분위기 연출

`opacity`를 활용해 GIF파일의 투명도 조절 가능