66 lines
1017 B
SCSS
66 lines
1017 B
SCSS
|
.error-404 {
|
||
|
|
height: 100vh;
|
||
|
|
width: 100vw;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
flex-direction: column;
|
||
|
|
|
||
|
|
.fourohfour {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: row;
|
||
|
|
h1 {
|
||
|
|
animation: grain 1s steps(10) infinite;
|
||
|
|
|
||
|
|
&:first-of-type {
|
||
|
|
animation-duration: 2s;
|
||
|
|
}
|
||
|
|
&:last-of-type {
|
||
|
|
animation-duration: 3s;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
a {
|
||
|
|
transition: transform 5s ease-in-out;
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
transform: scale(20) rotate(360deg);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes grain {
|
||
|
|
0%,
|
||
|
|
100% {
|
||
|
|
transform: translate(0, 0);
|
||
|
|
}
|
||
|
|
10% {
|
||
|
|
transform: translate(-5%, -10%);
|
||
|
|
}
|
||
|
|
20% {
|
||
|
|
transform: translate(-15%, 5%);
|
||
|
|
}
|
||
|
|
30% {
|
||
|
|
transform: translate(7%, -25%);
|
||
|
|
}
|
||
|
|
40% {
|
||
|
|
transform: translate(-5%, 25%);
|
||
|
|
}
|
||
|
|
50% {
|
||
|
|
transform: translate(-15%, 10%);
|
||
|
|
}
|
||
|
|
60% {
|
||
|
|
transform: translate(15%, 0%);
|
||
|
|
}
|
||
|
|
70% {
|
||
|
|
transform: translate(0%, 15%);
|
||
|
|
}
|
||
|
|
80% {
|
||
|
|
transform: translate(3%, 35%);
|
||
|
|
}
|
||
|
|
90% {
|
||
|
|
transform: translate(-10%, 10%);
|
||
|
|
}
|
||
|
|
}
|