hak8or/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add moving scanline, remove emoji font stuff

Browse Source
This commit is contained in:
daudix
2024-01-28 21:37:45 +03:00
parent 36d8dda804
commit 2588c08d0e
2 changed files with 61 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
sass/_crt.scss
View File

@ -22,37 +22,71 @@
.scanlines {
position: relative;
overflow: hidden;
}
.scanlines::after {
animation: scanlines 250ms linear infinite;
background: repeating-linear-gradient(
0deg,
rgba(0, 0, 0, 0.25),
rgba(0, 0, 0, 0.25) 1px,
transparent 3px,
transparent 4px
);
content: "";
display: block;
height: calc(100% + 8px);
left: 0;
pointer-events: none;
position: absolute;
top: 0;
width: 100%;
&::before {
animation: scanlines 250ms linear infinite;
background: repeating-linear-gradient(
to top,
rgba(0, 0, 0, 0.25),
rgba(0, 0, 0, 0.25) 1px,
transparent 3px,
transparent 4px
);
content: "";
display: block;
height: calc(100% + 0.5rem);
left: 0;
pointer-events: none;
position: absolute;
top: 0;
width: 100%;
@keyframes scanlines {
from {
transform: translateY(-8px);
@keyframes scanlines {
from {
transform: translateY(-0.5rem);
}
to {
transform: translateY(0);
}
}
to {
transform: translateY(0px);
@media (prefers-reduced-motion) {
animation: none;
}
}
@media (prefers-reduced-motion) {
animation: none;
&::after {
animation: scanline 5s linear infinite;
background: linear-gradient(
to top,
transparent 0%,
var(--primary-color-alpha) 10%,
transparent 100%
);
bottom: 100%;
content: "";
display: block;
height: 8rem;
left: 0;
pointer-events: none;
position: absolute;
width: 100%;
@keyframes scanline {
from {
bottom: 100%;
}
50% {
bottom: 100%;
}
to {
bottom: -8rem;
}
}
@media (prefers-reduced-motion) {
animation: none;
}
}
}