13 lines
1.5 KiB
CSS
13 lines
1.5 KiB
CSS
:root{--crt-flicker:0.02}
|
|
@keyframes crt-flicker{0%{opacity:.98} 50%{opacity:1} 100%{opacity:.97}}
|
|
.crt{animation:crt-flicker 1.8s infinite steps(60);}
|
|
.crt::before{content:"";position:fixed;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.08) 0px,rgba(0,0,0,.08) 1px,transparent 2px,transparent 4px);mix-blend-mode:multiply}
|
|
.crt::after{content:"";position:fixed;inset:-12vh -12vw -12vh -12vw;pointer-events:none;background:radial-gradient(ellipse at center, rgba(0,255,0,0.05) 0%, rgba(0,0,0,0.35) 60%, rgba(0,0,0,0.85) 100%)}
|
|
.aperture{position:fixed;inset:0;pointer-events:none;background:repeating-linear-gradient(90deg,rgba(0,255,0,.05) 0 1px,rgba(0,0,0,0) 1px 2px,rgba(0,255,0,.05) 2px 3px);mix-blend-mode:screen;opacity:.25}
|
|
.crt > *{position:relative;}
|
|
.crt > *::before{content:"";position:fixed;inset:0;pointer-events:none;backdrop-filter:none;}
|
|
.crt .curved{position:relative;}
|
|
.crt .curved::before{content:"";position:absolute;inset:-2vh -2vw;pointer-events:none;background:radial-gradient(120% 100% at 50% 50%, rgba(255,255,255,.02) 0%, rgba(0,0,0,0) 60%), radial-gradient(140% 120% at 50% 50%, rgba(0,0,0,.25) 60%, rgba(0,0,0,.45) 100%);border-radius:12px}
|
|
@keyframes scan-shift{from{transform:translateY(-2%)} to{transform:translateY(2%)}}
|
|
.crt .scanlines{position:fixed;inset:0;pointer-events:none;background:linear-gradient(rgba(0,0,0,.08) 50%, rgba(0,0,0,0) 50%);background-size:100% 3px;mix-blend-mode:multiply;animation:scan-shift 6s infinite alternate ease-in-out}
|