lain/mybio-svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix effects + new button

Browse Source
This commit is contained in:
Lain Iwakura 2025-08-24 20:45:01 +03:00
parent 96257a0188
commit c1212f93d5
No known key found for this signature in database
GPG Key ID: C7C18257F2ADC6F8
3 changed files with 12 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
public/crt.css
View File

@ -1,12 +1,14 @@
: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;}
:root{--crt-flicker:0.08}
@keyframes crt-flicker{0%{opacity:.92} 2%{opacity:.95} 4%{opacity:.98} 8%{opacity:1} 12%{opacity:.96} 16%{opacity:.99} 20%{opacity:.93} 24%{opacity:1} 28%{opacity:.97} 32%{opacity:.94} 36%{opacity:1} 40%{opacity:.95} 44%{opacity:.98} 48%{opacity:.92} 52%{opacity:1} 56%{opacity:.96} 60%{opacity:.99} 64%{opacity:.94} 68%{opacity:1} 72%{opacity:.97} 76%{opacity:.93} 80%{opacity:.98} 84%{opacity:1} 88%{opacity:.95} 92%{opacity:.97} 96%{opacity:.99} 100%{opacity:.94}}
body{position:relative}
.crt{position:relative;z-index:0}
.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;z-index:4;animation:crt-flicker .5s infinite linear}
.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%);z-index:5}
.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;z-index:2}
.crt > *{position:relative;z-index:1}
.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}
@keyframes random-flicker{0%{opacity:1} 1%{opacity:.97} 1.5%{opacity:1} 3%{opacity:.94} 3.2%{opacity:1} 8%{opacity:.98} 8.1%{opacity:1} 15%{opacity:.96} 15.3%{opacity:1} 23%{opacity:.92} 23.4%{opacity:1} 31%{opacity:.99} 47%{opacity:.95} 47.2%{opacity:1} 67%{opacity:.93} 67.5%{opacity:1} 78%{opacity:.97} 78.1%{opacity:1} 89%{opacity:.94} 89.3%{opacity:1} 100%{opacity:1}}
.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, random-flicker 4.7s infinite linear;z-index:3}

BIN
public/pictures/furrygiena.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.5 KiB

3
src/App.svelte
View File

@ -58,7 +58,8 @@
{ img: '/pictures/hatems.jpg', href: '', alt: 'hatems' },
{ img: '/pictures/piracy.gif', href: '', alt: 'piracy' },
{ img: '/pictures/mybutton.png', href: 'https://fuckyougoogle.xyz/', alt: 'mybutton' },
{ img: '/pictures/edwardcode.gif', href: 'https://edwardcode.net/', alt: 'edwardcode' }
{ img: '/pictures/edwardcode.gif', href: 'https://edwardcode.net/', alt: 'edwardcode' },
{ img: '/pictures/furrygiena.gif', href: '', alt: 'furrygiena' }
];
</script>