Template:BibisiLauncher/style.css: Difference between revisions
From SNCApedia, the shit nobody cares about encyclopedia
Jump to navigationJump to search
SomebodyRum (talk | contribs) No edit summary |
SomebodyRum (talk | contribs) No edit summary |
||
| Line 8: | Line 8: | ||
height: 0; | height: 0; | ||
overflow: visible; | overflow: visible; | ||
align-self: flex-end; | |||
} | } | ||
| Line 20: | Line 14: | ||
display: inline-block; | display: inline-block; | ||
font-size: 2em; | font-size: 2em; | ||
cursor: pointer; | |||
animation: rocket-fly 3s cubic-bezier(0.2, 0, 0.8, 1) forwards; | animation: rocket-fly 3s cubic-bezier(0.2, 0, 0.8, 1) forwards; | ||
animation-delay: 1s; | animation-delay: 1s; | ||
| Line 31: | Line 26: | ||
animation-delay: 3.8s; | animation-delay: 3.8s; | ||
} | } | ||
@keyframes rocket-fly { | @keyframes rocket-fly { | ||
| Line 56: | Line 38: | ||
50% { transform: translateY(-110vh) scale(3); opacity: 0.8; font-size: 5em; } | 50% { transform: translateY(-110vh) scale(3); opacity: 0.8; font-size: 5em; } | ||
100% { transform: translateY(-110vh) scale(6); opacity: 0; font-size: 8em; } | 100% { transform: translateY(-110vh) scale(6); opacity: 0; font-size: 8em; } | ||
} | } | ||
Revision as of 11:18, 11 April 2026
/* ==============================
BIBISI LAUNCHER
============================== */
.rocket-wrapper {
display: block;
text-align: center;
height: 0;
overflow: visible;
align-self: flex-end;
}
.rocket {
display: inline-block;
font-size: 2em;
cursor: pointer;
animation: rocket-fly 3s cubic-bezier(0.2, 0, 0.8, 1) forwards;
animation-delay: 1s;
}
.rocket-explosion {
display: inline-block;
font-size: 1em;
opacity: 0;
animation: explode 1.2s ease-out forwards;
animation-delay: 3.8s;
}
@keyframes rocket-fly {
0% { transform: translateY(0); opacity: 1; font-size: 2em; }
40% { transform: translateY(-30vh); opacity: 1; font-size: 2.2em; }
75% { transform: translateY(-70vh); opacity: 1; font-size: 2.6em; }
100% { transform: translateY(-110vh); opacity: 0; font-size: 3em; }
}
@keyframes explode {
0% { transform: translateY(-110vh) scale(1); opacity: 1; font-size: 2em; }
50% { transform: translateY(-110vh) scale(3); opacity: 0.8; font-size: 5em; }
100% { transform: translateY(-110vh) scale(6); opacity: 0; font-size: 8em; }
}