paul/DAIALECT
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

alles relativ

Browse Source
This commit is contained in:
Paul Martin
2023-12-27 16:08:07 +01:00
parent 82933b7f46
commit 94b352a2b2
4 changed files with 66 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
style.css
View File

@ -33,7 +33,7 @@ body
z-index: 55;
border-radius: 2cqmin;
opacity: 90%;
height: 6vh;
height: 3vw;
}
ul {
@ -54,7 +54,7 @@ li {
padding: 0.6vw;
text-decoration: none;
font-weight: bold;
font-size: 1.7vw;
font-size: 1.6vw;
}
li a {
@ -151,7 +151,8 @@ p {
font-size: 7.5vw;
text-align: right;
text-align-last: right;
padding-right: 10vw;
padding: 0 10vw 0 0;
margin: 0;
font-family: "League Spartan";
}
@ -182,6 +183,7 @@ h1 em {
font-size: 3.5vw;
font-family: "League Spartan";
font-style: normal;
padding-right: 10vw;
}
.button-rechts {
@ -255,12 +257,12 @@ hr {
.blob {
border-radius: 5px;
filter: blur(1.5px);
width: 10px;
height: 10px;
border-radius: 7.5vw;
filter: blur(1.6vw);
width: 15vw;
height: 15vw;
top: 25vh;
scale: 45;
scale: 1.4;
}
#blue {
@ -297,6 +299,12 @@ hr {
100% {color: inherit}
}
@keyframes border-out {
0% {opacity: 1;}
40% {opacity: 0;}
100% {opacity: 0;}
}
@keyframes border-in-out {
0% {border-radius: 1.5vw}
10%{border-radius: 1.5vw}
@ -315,80 +323,80 @@ hr {
@keyframes idle-blue {
0% {transform: scale(1); z-index: 0;}
20% {transform: scale(1.4); z-index: 1;}
40% {transform: scale(1.1); z-index: 0; transform: translateY(2px);}
60% {transform: scale(0.8); transform: translateX(2.5px)}
40% {transform: scale(1.1); z-index: 0; transform: translateY(2vw);}
60% {transform: scale(0.8); transform: translateX(2.5vw)}
80% {transform: scale(0.9);}
95% {transform: scale(1); transform: translateY(-2px); transform: translateX(-2.5px);}
95% {transform: scale(1); transform: translateY(-2vw); transform: translateX(-2.5vw);}
}
@keyframes idle-green {
0% {transform: scale(1); }
20% {transform: scale(0.8); }
40% {transform: scale(1.1); transform: translateY(3.5px);}
60% {transform: scale(0.9); transform: translateX(-1px)}
40% {transform: scale(1.1); transform: translateY(3.5vw);}
60% {transform: scale(0.9); transform: translateX(-1vw)}
80% {transform: scale(1.3); }
95% {transform: scale(1); ; transform: translateY(3px); transform: translateX(2px);}
95% {transform: scale(1); ; transform: translateY(3vw); transform: translateX(2vw);}
}
@keyframes idle-red {
0% {transform: scale(1); ;}
20% {transform: scale(1.3); z-index: 3;}
40% {transform: scale(1.2); z-index: 2; transform: translateY(-3px);}
60% {transform: scale(0.7); z-index: 0; transform: translateX(-2px)}
40% {transform: scale(1.2); z-index: 2; transform: translateY(-3vw);}
60% {transform: scale(0.7); z-index: 0; transform: translateX(-2vw)}
80% {transform: scale(0.9); z-index: 0;}
95% {transform: scale(1); ; transform: translateY(3px); transform: translateX(2px);}
95% {transform: scale(1); ; transform: translateY(3vw); transform: translateX(2vw);}
}
@keyframes move-down-1 {
0% {top: 0; right: 0}
100% {top: 0; right: 1000px}
100% {top: 0; right: 52vw}
}
@keyframes green-move-down-1 {
0% {top: 0; right: 0 }
50% {right: 400px}
90% {top: 75vh; opacity: 100%; right: 190px; transform: scale(1);}
100% {top: 100vh; right: 200px; opacity: 10%; transform: scale(0.2);}
50% {right: 21vw}
90% {top: 75vh; opacity: 100%; right: 9.8vw; transform: scale(1);}
100% {top: 100vh; right: 10.4vw; opacity: 10%; transform: scale(0.2);}
}
@keyframes red-move-down-1 {
0% {top: 0; right: 0 }
0% {top: 0;}
90% {top: 85vh; opacity: 100%; transform: scale(1);}
100% {top: 100vh; right: 0; opacity: 10%; transform: scale(0.2);}
100% {top: 100vh; opacity: 10%; transform: scale(0.2);}
}
@keyframes blue-move-down-1 {
0% {top: 0; right: 0 }
40% {right: 400px}
75% {right: 300px}
40% {right: 21vw}
75% {right: 17vw}
90% {opacity: 100%; transform: scale(1);}
100% {top: 110vh; right: 0px; opacity: 10%; transform: scale(0.2);}
100% {top: 110vh; right: 0; opacity: 10%; transform: scale(0.2);}
}
@keyframes move-down-2 {
0% {top: 0; right: 1000px}
100% {top: 0; right: 600px}
0% {top: 0; right: 52vw}
100% {top: 0; right: 31vw}
}
@keyframes green-move-down-2 {
0% {top: 100vh; right: 0px }
50% {right: 400px}
90% {top: 175vh; opacity: 100%; right: 190px; transform: scale(1);}
0% {top: 100vh; right: 0 }
50% {right: 21vw}
90% {top: 175vh; opacity: 100%; right: 9.8vw; transform: scale(1);}
100% {top: 205vh; right: 0; opacity: 10%; transform: scale(0.2);}
}
@keyframes red-move-down-2 {
0% {top: 100vh; right: 0px }
0% {top: 100vh;}
90% {top: 185vh; opacity: 100%; transform: scale(1);}
100% {top: 205vh; right: 0px; opacity: 10%; transform: scale(0.2);}
100% {top: 205vw; opacity: 10%; transform: scale(0.2);}
}
@keyframes blue-move-down-2 {
0% {top: 110vh; right: 200px }
40% {right: 500px}
75% {right: 400px}
0% {top: 110vh; right: 10.4vw }
40% {right: 26vw}
75% {right: 21vw}
90% {opacity: 100%; transform: scale(1);}
100% {top: 215vh; right: 200px; opacity: 10%; transform: scale(0.2);}
100% {top: 215vh; right: 10.4vw; opacity: 10%; transform: scale(0.2);}
}