CRT 스캔라인 효과 적용하기

[code]

<style>

.scanlines {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: 1000;

    pointer-events: none;

  }

  .scanlines::before, .scanlines::after {

    display: block;

    pointer-events: none;

    content: "";

    position: fixed;

  }

  .scanlines::before {

    width: 100%;

    height: 2px;

    z-index: 1001;

    background: rgba(0, 0, 0, 0.3);

    opacity: 0.75;

    animation: scanline 3s linear infinite;

  }

  .scanlines::after {

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    z-index: 1000;

    background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.3) 51%);

    background-size: 100% 4px;

    animation: scanlines 1s steps(60) infinite;

  }

  /* ANIMATE UNIQUE SCANLINE */

  @keyframes scanline {

    0% {

      transform: translateY(0);

    }

    100% {

      transform: translateY(100%);

    }

  }

  /* ANIMATE SCANLINES BACKGROUND */

  @keyframes scanlines {

    0% {

      background-position: 0 0;

    }

    100% {

      background-position: 0 100%;

    }

  }

</style>

[/code]

css 를 적용하고 싶은 곳에 

<div class="scanlines"></div>

선언만 해주시면 됩니다.

아참 <link rel="stylesheet" href="커스텀 css주소">

적용하고 싶은 페이지에 css를 불러 오시거나,

테마의 style.css에 추가하시면 됩니다.

취미삼아 만든 곳에 적용했는데요.

스캔라인효과가 동적이라 캡쳐 화면에 담지를 못하겠습니다.

적용한 사이트는

https://nangman.net 입니다.

한해 마무리 잘하시고! 새해 복 많이 받으세요! 내년엔 좋은 일만 가득하시길!