@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
:root {
--dance-move-duration: 1.5s;
}
.disco {
width: 8vw;
position: absolute;
bottom: 3vw;
transform-origin: center center;
z-index: 200;
}
.d1 {
left: 20vw;
}
.d2 {
left: 35vw;
bottom: 1vw;
}
.d3 {
right: 20vw;
transform: scale(-1, 1)
}
.d4 {
right: 35vw;
bottom: 1vw;
transform: scale(-1, 1)
}
.toggle-checkbox:checked~.disco #rightarm {
animation: var(--dance-move-duration) ease-in-out 0s rightarm forwards infinite;
}
@keyframes rightarm {
0%,
100% {
transform: translate(130px, 17px) scale(1.35);
}
50% {
transform: translate(120px, 17px) scale(1.35) rotate(-7deg);
}
}
#rightarm {
transform: translate(130px, 17px) scale(1.35);
transform-origin: 50% 10%;
}
.toggle-checkbox:checked~.disco #rthand {
animation: var(--dance-move-duration) ease-in-out 0s righthand forwards infinite;
}
@keyframes righthand {
0%,
100% {
transform: translate(130px, 17px) scale(1.35);
}
50% {
transform: translate(120px, 17px) scale(1.35) rotate(-7deg);
}
}
#rthand {
transform: translate(130px, 17px) scale(1.35);
transform-origin: 50% 10%;
}
.toggle-checkbox:checked~.disco #leftindex {
animation: var(--dance-move-duration) ease-in-out 0s ltindex forwards infinite;
}
@keyframes ltindex {
0%,
100% {
transform: translate(128px, 29px) scale(1.35);
}
50% {
transform: translate(-45px, 340px) scale(1.35);
}
}
#leftindex {
transform: translate(128px, 29px) scale(1.35);
transform-origin: 50% 10%;
}
.toggle-checkbox:checked~.disco #lefthand {
animation: var(--dance-move-duration) ease-in-out 0s lthand forwards infinite;
}
@keyframes lthand {
0%,
100% {
transform: translate(128px, 28px) scale(1.35) rotateX(0deg) rotateZ(0deg);
}
50% {
transform: translate(-40px, 340px) scale(1.35) rotateX(180deg) rotateZ(-12deg);
}
}
.toggle-checkbox:checked~.disco #lefthand2 {
animation: var(--dance-move-duration) ease-in-out 0s lthand2 forwards infinite;
}
@keyframes lthand2 {
0%,
100% {
transform: translate(128px, 28px) scale(1.35) rotateZ(0deg);
}
50% {
transform: translate(-2px, 300px) scale(1) rotateZ(-20deg);
}
}
#lefthand {
transform: translate(128px, 28px) scale(1.35);
transform-origin: 50% 10%;
}
#lefthand2 {
transform: translate(128px, 28px) scale(1.35);
transform-origin: 50% 10%;
}
.toggle-checkbox:checked~.disco #ltfore {
animation: var(--dance-move-duration) ease-in-out 0s ltforearm forwards infinite;
}
@keyframes ltforearm {
0%,
100% {
transform: translate(126px, 22px) scale(1.35) rotateX(0deg) rotateZ(0deg) rotateY(0);
}
50% {
transform: translate(-40px, 285px) scale(1.35) rotateX(180deg) rotateZ(-35deg) rotateY(20deg);
}
}
#ltfore {
transform: translate(126px, 22px) scale(1.35) rotateX(0deg) rotateZ(0deg);
transform-origin: 50% 10%;
}
.toggle-checkbox:checked~.disco #ltbicep {
animation: var(--dance-move-duration) ease-in-out 0s ltbicep forwards infinite;
}
@keyframes ltbicep {
0%,
10%,
90%,
100% {
transform: translate(126px, 25px) scale(1.35) rotateX(0deg) rotateZ(0deg);
}
25%,
75% {
transform: translate(45px, 65px) scale(1.35) rotateX(0deg) rotateZ(-20deg);
}
50% {
transform: translate(35px, 75px) scale(1.35) rotateX(12deg) rotateZ(-10deg);
}
}
#ltbicep {
transform: translate(126px, 25px) scale(1.35) rotateX(0deg) rotateZ(0deg);
transform-origin: 50% 10%;
}
.toggle-checkbox:checked~.disco #head {
animation: var(--dance-move-duration) ease-in-out 0s head forwards infinite;
}
@keyframes head {
0%,
100% {
transform: translate(0px, 2px);
}
50% {
transform: translate(-10px, 2px);
}
}
#head {
transform-origin: 50% 10%;
}
.toggle-checkbox:checked~.disco #leisure-btm-rt,
.toggle-checkbox:checked~.disco #leisure-btm-lft {
animation: var(--dance-move-duration) ease-in-out 0s hipsdontlie forwards infinite;
}
@keyframes hipsdontlie {
0%,
100% {
transform: translate(85px, 11px) scale(1.35);
}
50% {
transform: translate(75px, 11px) scale(1.35);
}
}
#leisure-btm-rt,
#leisure-btm-lft,
#ltleg,
#rtleg {
transform: translate(85px, 11px) scale(1.35);
}
.toggle-checkbox:checked~.disco #rtleg,
.toggle-checkbox:checked~.disco #ltleg {
animation: var(--dance-move-duration) ease-in-out 0s hipsdontlie2 forwards infinite;
}
@keyframes hipsdontlie2 {
0%,
100% {
transform: translate(85px, 11px) scale(1.35);
}
50% {
transform: translate(80px, 11px) scale(1.35);
}
}
/** Cannons **/
input:checked~.daredevil {
animation: 3s linear 1s fire forwards;
}
input:checked~.pow {
animation: 3s linear 1s pow forwards;
}
#cannon,
.dd1 {
--flip: 1;
}
#cannon2 {
transform: scale(-1, 1);
right: 0;
--flip: -1;
}
.daredevil {
width: 7vw;
position: absolute;
bottom: 0;
z-index: 190;
transform: translate(calc(var(--flip) * 13vw), -12.25vw) rotate(calc(var(--flip) * 70deg));
}
.dd1 {
left: 0;
}
img.dd2 {
right: 0;
--flip: -1;
}
.cannon {
z-index: 200;
position: absolute;
bottom: 7vw;
width: 18vw;
}
@keyframes fire {
0%,
5% {
transform: translate(calc(var(--flip) * 13vw), -12.25vw) rotate(calc(var(--flip) * 70deg));
}
100% {
transform: translate(calc(var(--flip) * 200vw), -90vw) rotate(calc(var(--flip) * 70deg));
}
}
.p1 {
--flip: 1;
left: 0;
}
.p2 {
--flip: -1;
right: 0;
}
.pow {
font-family: Verdana, sans-serif;
border-radius: 50%;
width: 5vw;
height: 4vw;
padding-top: 1.75vw;
color: #FFF;
text-align: center;
background-color: hsla(0, 0%, 50%, 1);
box-shadow: 2vw 2vw 0 hsla(0, 0%, 50%, 0.5), 1vw 1vw 0 hsla(0, 0%, 50%, 0.5), 2vw -2vw 0 hsla(0, 0%, 50%, 0.5), 1vw -1vw 0 hsla(0, 0%, 50%, 0.5), -2vw 2vw 0 hsla(0, 0%, 50%, 0.5), -1vw 1vw 0 hsla(0, 0%, 50%, 0.5), -2vw -2vw 0 hsla(0, 0%, 50%, 0.5), -1vw -1vw 0 hsla(0, 0%, 50%, 0.5), 4vw 0 0 hsla(0, 0%, 50%, 0.5), -4vw 0 0 hsla(0, 0%, 50%, 0.5), 3vw -1vw 0 hsla(0, 0%, 50%, 0.5), -3vw -1vw 0 hsla(0, 0%, 50%, 0.5), 3vw 1vw 0 hsla(0, 0%, 50%, 0.5), -3vw 1vw 0 hsla(0, 0%, 50%, 0.5);
position: absolute;
bottom: 0;
transform: translate(calc(var(--flip) * 16vw), -17vw) rotate(calc(var(--flip) * 70deg));
font-size: 2.25vw;
opacity: 0;
z-index: 1000;
}
@keyframes pow {
0%,
25%,
100% {
opacity: 0;
}
7% {
opacity: 1;
}
}
.toggle-checkbox:checked~.z-celebration {
animation: cancan 1s steps(7, end) infinite;
}
@keyframes cancan {
from {
background-position: 0;
}
to {
background-position: -210vw;
}
}
.z-celebration {
width: 30vw;
height: 12vw;
background-image: url("https://assets.codepen.io/1804713/dance_humans.svg");
background-repeat: no-repeat;
position: absolute;
background-size: 800%;
bottom: 8vw;
z-index: 180;
}
.zc1 {
left: 23vw;
}
.zc2 {
right: 23vw;
transform: scale(-1, 1);
}
.toggle-checkbox:checked~.dinowrap .dino {
animation: dinomove 5s steps(29, end) 3s forwards;
}
.toggle-checkbox:checked~.dinowrap {
animation: popup 10s linear 1s forwards;
}
.dino {
width: 20vw;
height: 24vw;
width: 100%;
background-repeat: no-repeat;
background-size: 600vw;
background-image: url("https://assets.codepen.io/1804713/t-rex-v.png");
position: absolute;
top: 0;
left: 0;
}
.dinowrap {
width: 20vw;
height: 40vw;
position: absolute;
bottom: 0;
left: 40vw;
transform: translateY(40vw);
z-index: 100;
}
.dinowrap::after {
content: " ";
position: absolute;
width: 19vw;
height: 20vw;
background-color: #3C6335;
display: block;
bottom: 0;
margin: -0.25vw 0.5vw;
}
@keyframes dinomove {
from {
background-position: 0;
}
to {
background-position: -580vw;
}
}
@keyframes popup {
0%,
100% {
transform: translateY(40vw);
}
20%,
80% {
transform: translateY(0);
}
}
/** Accordions **/
.zombieaccordion, .accord, .zombiehands {
width: 9vw;
position: absolute;
z-index: 500;
bottom: 1vw;
}
.za1 .zombieaccordion, .za1 .accord, .za1 .zombiehands {
left: 5vw;
}
.za2 .zombieaccordion, .za2 .accord, .za2 .zombiehands {
right: 5vw;
}
.music {
width: 10vw;
position: absolute;
bottom: 5vw;
z-index: 500;
}
.za1 .music {
left: 5vw;
}
.za2 .music {
right: 5vw;
}
.toggle-checkbox:checked~.za .musicnote {
animation: 1s ease-in-out calc(var(--multiplier) * 1s - 1s) notes forwards infinite;
}
.musicnote {
width: 1vw;
height: 2vw;
opacity: 0;
}
.n1 {
--multiplier: 1
}
.n2 {
--multiplier: 1.2
}
.n3 {
--multiplier: 1.4
}
.n4 {
--multiplier: 1.6
}
.n5 {
--multiplier: 1.8
}
.n6 {
--multiplier: 2
}
.n7 {
--multiplier: 2.2
}
@keyframes notes {
0% {
opacity: 0;
transform: translateY(0);
}
30%,
80% {
opacity: 1;
}
100% {
opacity: 0;
transform: translateY(-2vw);
}
}
.toggle-checkbox:checked~.za .zleft,
.toggle-checkbox:checked~.za .zright {
animation: 1s ease-in-out 0s play forwards infinite;
}
.zright {
--multiplier: 1;
transform-origin: 0 0;
transform: translateX(0) rotate(0);
}
.zleft {
--multiplier: -1;
transform-origin: 0 0;
transform: translateX(0) rotate(0);
}
@keyframes play {
0%,
100% {
transform: translateX(0) rotate(0);
}
50% {
transform: translate(calc(var(--multiplier) * 30px), calc(var(--multiplier) * -156px)) rotate(calc(var(--multiplier) * 2deg));
}
}
.toggle-checkbox:checked~.za .accord, .toggle-checkbox:checked~.za .zombiehands {
animation: 1s ease-in-out 0s squeeze forwards infinite;
}
.accordion, .accord {
transform-origin: center center;
transform: scaleX(1);
}
@keyframes squeeze {
0%,
100% {
transform: scaleX(1);
}
50% {
transform: scaleX(0.8);
}
}
.toggle-checkbox:checked~.shrinkray .beam {
animation: 0.5s ease-in-out 0s beamer forwards infinite;
}
@keyframes beamer {
0% {
opacity: 1;
transform: translateX(0);
}
99% {
opacity: 1;
}
100% {
opacity: 0;
transform: translateX(100vw);
}
}
.shrinkray {
width: 15vw;
position: absolute;
bottom: 8vw;
left: 47.5vw;
transform-origin: 20% 50%;
transform: rotate(-90deg);
z-index: 50;
filter: drop-shadow(0px 0px 2px #333);
}
.s12 {
transform: rotate(-180deg);
left: 32.5vw;
z-index: 44;
}
.s13 {
transform: rotate(0deg);
left: 62.5vw;
z-index: 44;
}
.s1 {
transform: rotate(-15deg);
left: 60vw;
z-index: 45;
}
.s2 {
transform: rotate(-30deg);
left: 57.5vw;
z-index: 46;
}
.s3 {
transform: rotate(-45deg);
left: 55vw;
z-index: 47;
}
.s4 {
transform: rotate(-60deg);
left: 52.5vw;
z-index: 48;
}
.s5 {
transform: rotate(-75deg);
left: 50vw;
z-index: 49;
}
.s6 {
transform: rotate(-105deg);
left: 45vw;
z-index: 49;
}
.s7 {
transform: rotate(-120deg);
left: 42.5vw;
z-index: 48;
}
.s8 {
transform: rotate(-135deg);
left: 40vw;
z-index: 47;
}
.s9 {
transform: rotate(-150deg);
left: 37.5vw;
z-index: 46;
}
.s10 {
transform: rotate(-165deg);
left: 35vw;
z-index: 45;
}
.s11 {
transform: rotate(-90deg);
left: 47.5vw;
z-index: 50;
}
.beam {
position: absolute;
width: 10vw;
height: 0.5vw;
bottom: 3vw;
left: 5vw;
background-color: yellow;
z-index: -1;
box-shadow: 0 0 0.5vw yellow, 0 0 0.5vw yellow;
opacity: 0;
}
.finalnote {
width: 50vw;
position: absolute;
top: 20vh;
left: 25vw;
z-index: 1000;
background-color: rgba(0, 0, 0, 0.8);
padding: 2vw;
box-sizing: border-box;
border-radius: 2vw;
text-align: center;
font-size: 1.25em;
color: #FFF;
font-family: 'Press Start 2P', cursive;
line-height: 1.9;
border: 1vw solid #960B0b;
opacity: 0;
}
@keyframes reveal {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.toggle-checkbox:checked~.finalnote {
animation: 1s ease-in-out 9s reveal forwards;
}
.finalnote span {
font-size: 1.45em;
}
.finalnote img {
width: 10vw;
max-width: 400px;
min-width: 200px;
display: block;
float: left;
margin: 0 1vw 1vw 0;
}
.sp {
font-size: 0.75em;
}
.finalnote a {
color: #960B0B;
}
.finalnote a:hover {
color: rgb(255, 181, 97);
}
#cloud1 {
width: 10vw;
position: absolute;
top: 5vw;
left: 20vw;
}
#cloud2 {
width: 10vw;
position: absolute;
top: 8vw;
right: 20vw;
}
.zicarus {
position: absolute;
left: -22vw;
width: 22vw;
transform: translate(0, 0) scale(1) rotate(90deg);
transform-origin: center center;
}
.toggle-checkbox:checked~.zicarus {
animation: 8s linear 0s flight forwards;
}
@keyframes flight {
0% {
transform: translate(0, 0) scale(0.2) rotate(90deg);
}
30% {
transform: translate(150vw, 0) scale(0.4) rotate(90deg);
}
35% {
transform: translate(150vw, 0) scale(0.4) rotate(-90deg);
}
60% {
transform: translate(0, 0) scale(0.8) rotate(-90deg);
}
70% {
transform: translate(0, 0) scale(0.8) rotate(90deg);
}
100% {
transform: translate(150vw, 0) scale(1) rotate(90deg);
}
}
.ground {
position: absolute;
width: 100vw;
height: 10vw;
background-color: tan;
bottom: 0;
left: 0;
z-index: 120;
}
body {
background-color: skyblue;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100vw;
height: 100vh;
z-index: 0;
margin: 0;
}
.logo {
width: 100%;
max-width: 400px;
position: absolute;
top: 0;
right: 0;
z-index: -1;
}
.logo img {
width: 100%;
}
input {
display: none;
}
input:checked+label {
box-shadow: inset 3px 3px 2px #660000;
transform: translate(3px, 3px);
}
label {
font-size: 1.5em;
color: #FFF;
background-color: #960B0B;
width: 140px;
height: 30px;
text-align: center;
font-weight: bold;
display: block;
border-radius: 7px;
box-shadow: 3px 3px 0 #660000;
cursor: pointer;
position: realtive;
z-index: 10001;
margin: 0.5em;
}
!
