CRT 스캔라인 효과 적용하기 정보
CRT 스캔라인 효과 적용하기본문
<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>
css 를 적용하고 싶은 곳에
<div class="scanlines"></div>
선언만 해주시면 됩니다.
아참 <link rel="stylesheet" href="커스텀 css주소">
적용하고 싶은 페이지에 css를 불러 오시거나,
테마의 style.css에 추가하시면 됩니다.
취미삼아 만든 곳에 적용했는데요.
스캔라인효과가 동적이라 캡쳐 화면에 담지를 못하겠습니다.
적용한 사이트는
https://nangman.net 입니다.
한해 마무리 잘하시고! 새해 복 많이 받으세요! 내년엔 좋은 일만 가득하시길!
!-->
추천
2
2
댓글 3개
눈이 어질 어질하네요 @@
사이트가 추억을 건드리네요 ^^
ㅋㅋ 응답하라같아요 재밌음
와우~~!