mirror of
https://github.com/asimonson1125/asimonson1125.github.io.git
synced 2026-02-25 05:09:49 -06:00
Rebuild homepage with Flask
This commit is contained in:
60
src/static/scss/head.scss
Normal file
60
src/static/scss/head.scss
Normal file
@@ -0,0 +1,60 @@
|
||||
.line {
|
||||
&:not(:first-child) {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
@for $i from 1 through 10 {
|
||||
&:nth-child(#{$i}) {
|
||||
animation:
|
||||
clip 6000ms $i * -600ms linear infinite,
|
||||
glitch#{$i} 2500ms random(1000) * -1ms linear infinite;
|
||||
|
||||
@keyframes glitch#{$i} {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
96% {
|
||||
transform: translateX(0);
|
||||
color: #fff;
|
||||
}
|
||||
97% {
|
||||
transform: translateX(random(10) - 5px);
|
||||
color: #4E9A26;
|
||||
}
|
||||
98% {
|
||||
transform: translateX(random(10) - 5px);
|
||||
color: #AC1212;
|
||||
}
|
||||
99% {
|
||||
transform: translateX(random(10) - 5px);
|
||||
color: #fff;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes clip {
|
||||
0% {
|
||||
clip-path: polygon(
|
||||
0 100%,
|
||||
100% 100%,
|
||||
100% 120%,
|
||||
0 120%
|
||||
);
|
||||
}
|
||||
|
||||
100% {
|
||||
clip-path: polygon(
|
||||
0 -20%,
|
||||
100% -20%,
|
||||
100% 0%,
|
||||
0 0
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user