alles außer animation
This commit is contained in:
259
style.css
259
style.css
@ -7,12 +7,14 @@ body
|
||||
background-image: url("resources/noise-texture.svg");
|
||||
color: #E07A31;
|
||||
font-family: "League Spartan";
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
#navbar-top {
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
margin-top: 20px;
|
||||
margin-top: 2vh;
|
||||
animation: float-in 0.3s ease-out;
|
||||
position: relative;
|
||||
z-index: 110;
|
||||
@ -21,37 +23,38 @@ body
|
||||
#navbar-bottom {
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
margin-bottom: 50px;
|
||||
margin-bottom: 2.5vh;
|
||||
}
|
||||
|
||||
#navbar {
|
||||
text-align: center;
|
||||
width: 40%;
|
||||
width: 40vw;
|
||||
background-color: #E07A31;
|
||||
z-index: 55;
|
||||
border-radius: 20px;
|
||||
border-radius: 2cqmin;
|
||||
opacity: 90%;
|
||||
height: 60px;
|
||||
height: 6vh;
|
||||
}
|
||||
|
||||
ul {
|
||||
vertical-align: middle;
|
||||
list-style-type: none;
|
||||
margin: 8px;
|
||||
margin: 0.6vh;
|
||||
margin-bottom: 0.3vh;
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
padding-right: 5%;
|
||||
padding-left: 5%;
|
||||
padding-right: 2vw;
|
||||
padding-left: 2vw;
|
||||
}
|
||||
|
||||
li {
|
||||
float: left;
|
||||
color: #FFE49F;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
padding: 0.6vw;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
font-size: 30px;
|
||||
font-size: 1.7vw;
|
||||
}
|
||||
|
||||
li a {
|
||||
@ -59,39 +62,37 @@ li a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
li a:hover {
|
||||
animation: highlight-text 0.4s ease-in-out;
|
||||
li.link:hover {
|
||||
transform: scale(107%);
|
||||
}
|
||||
|
||||
|
||||
.start {
|
||||
display: flex;
|
||||
margin-top: -100px;
|
||||
}
|
||||
|
||||
b {
|
||||
text-align: right;
|
||||
justify-content: space-evenly;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
#eins {
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
#zwei {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: 10;
|
||||
height: 120vh;
|
||||
}
|
||||
|
||||
.text-rechts {
|
||||
width: 46%;
|
||||
margin-right: 100px;
|
||||
width: 46vw;
|
||||
margin-right: 5vw;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-weight: bold;
|
||||
font-size: 150px;
|
||||
font-size: 8vw;
|
||||
position: relative;
|
||||
text-align: justify;
|
||||
text-align-last: justify;
|
||||
@ -103,26 +104,28 @@ h2 {
|
||||
}
|
||||
|
||||
#zwei h2 {
|
||||
font-size: 180px;
|
||||
font-size: 10vw;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
|
||||
.text-mittig {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 90%;
|
||||
margin-left: 5%;
|
||||
margin-right: 5%;
|
||||
}
|
||||
|
||||
.text-mittig small {
|
||||
font-size: 150px;
|
||||
.text-mittig h3 {
|
||||
font-size: 8vw;
|
||||
font-weight: bold;
|
||||
position: relative;
|
||||
text-align: justify;
|
||||
text-align-last: justify;
|
||||
}
|
||||
|
||||
p {
|
||||
position: relative;
|
||||
font-size: 20px;
|
||||
font-size: 0.8vw;
|
||||
text-align: right;
|
||||
z-index: 60;
|
||||
}
|
||||
@ -130,7 +133,7 @@ p {
|
||||
.title
|
||||
{
|
||||
font-family: "League Spartan Black";
|
||||
font-size: 170px;
|
||||
font-size: 10vw;
|
||||
display: flex;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
@ -145,64 +148,94 @@ p {
|
||||
}
|
||||
|
||||
.title h2{
|
||||
font-size: 150px;
|
||||
font-size: 7.5vw;
|
||||
text-align: right;
|
||||
text-align-last: right;
|
||||
padding-right: 140px;
|
||||
padding-top: 140px;
|
||||
padding-right: 10vw;
|
||||
font-family: "League Spartan";
|
||||
}
|
||||
|
||||
.title h3{
|
||||
font-size: 125px;
|
||||
font-size: 6.6vw;
|
||||
text-align: right;
|
||||
text-align-last: right;
|
||||
padding-right: 140px;
|
||||
padding-top: 160px;
|
||||
padding-right: 7vw;
|
||||
font-family: "League Spartan";
|
||||
}
|
||||
|
||||
.title em {
|
||||
font-family: "sans-serif";
|
||||
font-size: 120px;
|
||||
.laut {
|
||||
font-family: sans-serif !important;
|
||||
font-size: 6vw !important;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.title out {
|
||||
.title em {
|
||||
-webkit-text-fill-color: transparent;
|
||||
-webkit-text-stroke: 5px #E07A31;
|
||||
-webkit-text-stroke: 0.3vw #E07A31;
|
||||
}
|
||||
|
||||
h1 em {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.title small {
|
||||
font-size: 70px;
|
||||
.title p {
|
||||
font-size: 3.5vw;
|
||||
font-family: "League Spartan";
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.button-rechts {
|
||||
height: 1000px;
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
top: 275px;
|
||||
top: 25vh;
|
||||
width: 46%;
|
||||
margin-right: 100px;
|
||||
justify-content: center;
|
||||
margin-right: 5vw;
|
||||
display: block;
|
||||
}
|
||||
|
||||
button {
|
||||
form {
|
||||
background-color: transparent;
|
||||
border-style: dotted;
|
||||
border-color: #E07A31;
|
||||
border-width: 10px;
|
||||
border-radius: 32px;
|
||||
border-width: 1vh;
|
||||
border-radius: 1.5vw;
|
||||
color: #E07A31;
|
||||
padding-left: 25px;
|
||||
padding-right: 25px;
|
||||
padding-top: 25px;
|
||||
padding-bottom: 20px;
|
||||
padding: 2vw;
|
||||
text-decoration: none;
|
||||
font-family: "League Spartan Black";
|
||||
font-size: 100px;
|
||||
font-size: 3vw;
|
||||
text-align: center;
|
||||
height: 9vw;
|
||||
}
|
||||
|
||||
form label {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
color: #e07a319c;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
hr {
|
||||
color: #E07A31;
|
||||
border-style: dotted none none none;
|
||||
border-width: 1vh;
|
||||
}
|
||||
|
||||
#fileselect {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
|
||||
.sel {
|
||||
color:#fff0cb
|
||||
}
|
||||
|
||||
@keyframes raise {
|
||||
0% {z-index: 0; opacity: 0%;}
|
||||
70% {opacity: 50%;}
|
||||
@ -222,17 +255,19 @@ button {
|
||||
|
||||
|
||||
.blob {
|
||||
border-radius: 200px;
|
||||
filter: blur(60px);
|
||||
width: 400px;
|
||||
height: 350px;
|
||||
top: 250px;
|
||||
border-radius: 5px;
|
||||
filter: blur(1.5px);
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
top: 25vh;
|
||||
scale: 45;
|
||||
}
|
||||
|
||||
#blue {
|
||||
background-color: rgb(80, 239, 244);
|
||||
background-color: #50eff4;
|
||||
position: relative;
|
||||
right: 200px;
|
||||
right: 22vh;
|
||||
top: 10vh;
|
||||
z-index: 0;
|
||||
animation: idle-blue 8s 0.4s infinite;
|
||||
}
|
||||
@ -240,17 +275,17 @@ button {
|
||||
#green {
|
||||
background-color: #86ec4f;
|
||||
position: relative;
|
||||
top: -200px;
|
||||
right: 150px;
|
||||
top: -22vh;
|
||||
right: 15vh;
|
||||
z-index: 2;
|
||||
animation: idle-green 5s 0.3s infinite;
|
||||
}
|
||||
|
||||
#red {
|
||||
background-color: rgb(240, 75, 193);
|
||||
background-color: #f04bc1;
|
||||
position: relative;
|
||||
left: 60px;
|
||||
top: -45px;
|
||||
left: 6vh;
|
||||
top: -4.5vh;
|
||||
z-index: 1;
|
||||
animation: idle-red 7s 0.3s infinite;
|
||||
}
|
||||
@ -263,101 +298,103 @@ button {
|
||||
}
|
||||
|
||||
@keyframes border-in-out {
|
||||
0% {border-radius: 32px}
|
||||
10%{border-radius: 32px}
|
||||
40% {border-radius: 125px}
|
||||
60% {border-radius: 125px}
|
||||
90%{border-radius: 32px}
|
||||
100% {border-radius: 32px}
|
||||
0% {border-radius: 1.5vw}
|
||||
10%{border-radius: 1.5vw}
|
||||
40% {border-radius: 6vw}
|
||||
60% {border-radius: 6vw}
|
||||
90%{border-radius: 1.5vw}
|
||||
100% {border-radius: 1.5vw}
|
||||
}
|
||||
|
||||
@keyframes float-in {
|
||||
0% {transform: translateY(-100px); opacity: 0%}
|
||||
100% {transform: translateY(0px); opacity: 90%;}
|
||||
0% {transform: translateY(-15vh); opacity: 0%}
|
||||
100% {transform: translateY(0vh); opacity: 90%;}
|
||||
}
|
||||
|
||||
@keyframes highlight-text {
|
||||
0% {font-size: 30px;}
|
||||
40% {font-size: 38px;}
|
||||
80% {font-size: 38px;}
|
||||
100% {font-size: 30px;}
|
||||
}
|
||||
|
||||
@keyframes idle-blue {
|
||||
0% {transform: scale(1); }
|
||||
20% {transform: scale(1.4); }
|
||||
40% {transform: scale(1.1); transform: translateY(40px);}
|
||||
60% {transform: scale(0.8); transform: translateX(50px)}
|
||||
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)}
|
||||
80% {transform: scale(0.9);}
|
||||
95% {transform: scale(1); transform: translateY(-40px); transform: translateX(-50px);}
|
||||
95% {transform: scale(1); transform: translateY(-2px); transform: translateX(-2.5px);}
|
||||
}
|
||||
|
||||
@keyframes idle-green {
|
||||
0% {transform: scale(1); }
|
||||
20% {transform: scale(0.8); }
|
||||
40% {transform: scale(1.1); transform: translateY(70px);}
|
||||
60% {transform: scale(0.9); transform: translateX(-20px)}
|
||||
40% {transform: scale(1.1); transform: translateY(3.5px);}
|
||||
60% {transform: scale(0.9); transform: translateX(-1px)}
|
||||
80% {transform: scale(1.3); }
|
||||
95% {transform: scale(1); ; transform: translateY(60px); transform: translateX(45px);}
|
||||
95% {transform: scale(1); ; transform: translateY(3px); transform: translateX(2px);}
|
||||
}
|
||||
|
||||
@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(-60px);}
|
||||
60% {transform: scale(0.7); z-index: 0; transform: translateX(-45px)}
|
||||
40% {transform: scale(1.2); z-index: 2; transform: translateY(-3px);}
|
||||
60% {transform: scale(0.7); z-index: 0; transform: translateX(-2px)}
|
||||
80% {transform: scale(0.9); z-index: 0;}
|
||||
95% {transform: scale(1); ; transform: translateY(60px); transform: translateX(45px);}
|
||||
95% {transform: scale(1); ; transform: translateY(3px); transform: translateX(2px);}
|
||||
}
|
||||
|
||||
@keyframes move-down-1 {
|
||||
0% {top: 0px; right: 0px}
|
||||
100% {top: 0px; right: 1000px}
|
||||
0% {top: 0; right: 0}
|
||||
100% {top: 0; right: 1000px}
|
||||
}
|
||||
|
||||
@keyframes green-move-down-1 {
|
||||
0% {top: 0px; right: 0px }
|
||||
0% {top: 0; right: 0 }
|
||||
50% {right: 400px}
|
||||
90% {top: 750px; opacity: 100%; right: 190px; transform: scale(1);}
|
||||
100% {top: 1000px; right: 200px; opacity: 20%; transform: scale(0.2);}
|
||||
90% {top: 75vh; opacity: 100%; right: 190px; transform: scale(1);}
|
||||
100% {top: 100vh; right: 200px; opacity: 10%; transform: scale(0.2);}
|
||||
}
|
||||
|
||||
@keyframes red-move-down-1 {
|
||||
0% {top: 0px; right: 0px }
|
||||
90% {top: 850px; opacity: 100%; transform: scale(1);}
|
||||
100% {top: 1000px; right: 0px; opacity: 20%; transform: scale(0.2);}
|
||||
0% {top: 0; right: 0 }
|
||||
90% {top: 85vh; opacity: 100%; transform: scale(1);}
|
||||
100% {top: 100vh; right: 0; opacity: 10%; transform: scale(0.2);}
|
||||
}
|
||||
|
||||
@keyframes blue-move-down-1 {
|
||||
0% {top: 0px; right: 0px }
|
||||
0% {top: 0; right: 0 }
|
||||
40% {right: 400px}
|
||||
75% {right: 300px}
|
||||
90% {opacity: 100%; transform: scale(1);}
|
||||
100% {top: 1100px; right: 0px; opacity: 20%; transform: scale(0.2);}
|
||||
100% {top: 110vh; right: 0px; opacity: 10%; transform: scale(0.2);}
|
||||
}
|
||||
|
||||
@keyframes move-down-2 {
|
||||
0% {top: 0px; right: 1000px}
|
||||
100% {top: 0px; right: 600px}
|
||||
0% {top: 0; right: 1000px}
|
||||
100% {top: 0; right: 600px}
|
||||
}
|
||||
|
||||
@keyframes green-move-down-2 {
|
||||
0% {top: 1000px; right: 0px }
|
||||
0% {top: 100vh; right: 0px }
|
||||
50% {right: 400px}
|
||||
90% {top: 1750px; opacity: 100%; right: 190px; transform: scale(1);}
|
||||
100% {top: 2050px; right: 0px; opacity: 20%; transform: scale(0.2);}
|
||||
90% {top: 175vh; opacity: 100%; right: 190px; transform: scale(1);}
|
||||
100% {top: 205vh; right: 0; opacity: 10%; transform: scale(0.2);}
|
||||
}
|
||||
|
||||
@keyframes red-move-down-2 {
|
||||
0% {top: 1000px; right: 0px }
|
||||
90% {top: 1850px; opacity: 100%; transform: scale(1);}
|
||||
100% {top: 2050px; right: 0px; opacity: 20%; transform: scale(0.2);}
|
||||
0% {top: 100vh; right: 0px }
|
||||
90% {top: 185vh; opacity: 100%; transform: scale(1);}
|
||||
100% {top: 205vh; right: 0px; opacity: 10%; transform: scale(0.2);}
|
||||
}
|
||||
|
||||
@keyframes blue-move-down-2 {
|
||||
0% {top: 1100px; right: 200px }
|
||||
0% {top: 110vh; right: 200px }
|
||||
40% {right: 500px}
|
||||
75% {right: 400px}
|
||||
90% {opacity: 100%; transform: scale(1);}
|
||||
100% {top: 2150px; right: 200px; opacity: 20%; transform: scale(0.2);}
|
||||
}
|
||||
100% {top: 215vh; right: 200px; opacity: 10%; transform: scale(0.2);}
|
||||
}
|
||||
|
||||
|
||||
@keyframes appear {
|
||||
0% {transform: scale(0); opacity: 0%}
|
||||
60% {transform: scale(0.8)}
|
||||
80% {transform: scale(1.1); opacity: 100%}
|
||||
100% {transform: scale(1)}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user