@font-face {
font-family: 'Air Conditioner';
font-style: normal;
font-weight: normal;
src: local('Air Conditioner'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/383755/AirConditioner.woff') format('woff');
}
$br: #f1e8d7;
$w: #eeeded;
$g: #3e9344;
$b: #181f1d;
$r: #ee3a1d;
$y: #f4c42c;
$t: transparent;
$bl: #53addd;
body{
display:flex;
justify-content:center;
align-items:center;
height:100vh;
overflow:hidden;
background:radial-gradient(circle at center, $br 500px, darken($br, 15%));
&:before, &:after{
content:'Monster';
position:absolute;
display:inline-block;
left:calc(50% + 15px);
transform:translateX(calc(-50% - 25px));
text-align:center;
font-family:'Air Conditioner';
filter:url(#jagged);
font-size:60px;
z-index:2;
top:calc(50% + 225px);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-image: linear-gradient(45deg, $r -400px, $r 85px, #e79198 100px, #e79198 110px, $r 125px, $r 10000px);
background-size:150% 150%;
animation:shineText 4s ease-in-out infinite;
@keyframes shineText{
0%{
background-position:-200px 50%;
}
10%{
background-position:300px 50%;
}
50%{
background-position:-200px 50%;
}
75%{
background-position:-200px 50%;
}
100%{
background-position:300px 50%;
}
}
}
&:after{
content:'Mashup';
margin-top:30px;
animation-delay:-1.25s;
transform:translateX(calc(-50% + 25px));
}
svg{
position:absolute;
}
#wrap{
width:400px;
height:650px;
filter:url(#jagged);
position:relative;
transform:scale(0.65) translateY(-50px);
input{
opacity:0;
cursor:pointer;
}
.monsters{
position:absolute;
width:100%;
height:100%;
left:0;
top:0;
}
.arrows{
width:calc(100% + 300px);
left:-150px;
position:absolute;
height:33.3333%;
pointer-events:none;
&.bodyNav{
top:33.3333%;
}
&.legNav{
top:66.6666%;
}
.arrow{
position:absolute;
top:calc(50% - 25px);
left:0;
width:50px;
background:$b;
height:50px;
clip-path: polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%);
&:before{
content:'';
position:absolute;
width:50%;
height:50%;
left:30%;
top:25%;
background:$r;
opacity:0;
clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
border-radius:100%;
}
&:nth-of-type(2){
left:auto;
right:0;
clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
&:before{
left:auto;
right:30%;
}
}
}
}
input{
position:absolute;
width:150px;
left:-150px;
height:33.3333%;
z-index:8;
opacity:0;
}
input.headNav{
&:nth-of-type(3){
&:checked{
&~.arrows.headNav{
.arrow{
&:last-of-type{
&:before{
opacity:1;
}
}
}
}
}
}
&:first-of-type{
&:checked{
&~.arrows.headNav{
.arrow{
&:first-of-type{
&:before{
opacity:1;
}
}
}
}
}
}
&:checked{
pointer-events:none;
&~input.headNav{
left:auto;
right:-150px;
z-index:9;
&:hover{
&~.arrows.headNav{
.arrow:first-of-type{
opacity:1;
}
}
}
&~input.headNav{
z-index:8;
}
}
}
@for $i from 1 through 3{
&:nth-of-type(#{$i}){
&:checked{
& ~ .monsters div.head > div:nth-of-type(#{$i}){
transform:translateX(0);
&.frank{
transform:translateX(0) scaleX(0.8) scaleY(0.9);
}
& ~ div{
transform:translateX(250%);
&.frank{
transform:translateX(250%) scaleX(0.8) scaleY(0.9);
}
}
}
}
}
}
}
input.bodyNav{
top:33.3333%;
&:nth-of-type(6){
&:checked{
&~.arrows.bodyNav{
.arrow{
&:last-of-type{
&:before{
opacity:1;
}
}
}
}
}
}
&:nth-of-type(4){
&:checked{
&~.arrows.bodyNav{
.arrow{
&:first-of-type{
&:before{
opacity:1;
}
}
}
}
}
}
&:checked{
pointer-events:none;
&~input.bodyNav{
left:auto;
right:-150px;
z-index:9;
&:hover{
&~.arrows.bodyNav{
.arrow:first-of-type{
opacity:1;
}
}
}
&~input.bodyNav{
z-index:8;
}
}
}
@for $i from 1 through 3{
&:nth-of-type(#{($i + 3)}){
&:checked{
& ~ .monsters div.body > div:nth-of-type(#{$i}){
transform:translateX(0);
& ~ div{
transform:translateX(250%);
}
}
}
}
}
}
input.legNav{
top:66.6666%;
&:last-of-type{
&:checked{
&~.arrows.legNav{
.arrow{
&:last-of-type{
&:before{
opacity:1;
}
}
}
}
}
}
&:nth-of-type(7){
&:checked{
&~.arrows.legNav{
.arrow{
&:first-of-type{
&:before{
opacity:1;
}
}
}
}
}
}
&:checked{
pointer-events:none;
&~input.legNav{
left:auto;
right:-150px;
z-index:9;
&:hover{
&~.arrows.legNav{
.arrow:first-of-type{
opacity:1;
}
}
}
&~input.legNav{
z-index:8;
}
}
}
@for $i from 1 through 3{
&:nth-of-type(#{($i + 6)}){
&:checked{
& ~ .monsters div.legs > div:nth-of-type(#{$i}){
transform:translateX(0);
& ~ div{
transform:translateX(250%);
}
}
}
}
}
}
div.head, div.body, div.legs{
position:relative;
width:100%;
height:33.333%;
> div{
position:absolute;
width:60%;
height:100%;
top:0;
left:20%;
transform:translateX(-250%);
transition:0.9s cubic-bezier(1,0,0,1);
.part{
position:absolute;
.one, .two{
position:absolute;
}
}
}
}
.legs{
z-index:-1;
clip-path: polygon(0 0, 100% 0, 100% 150%, 0 150%);
> div{
&.drac{
.part{
&:first-of-type, &:nth-of-type(2){
width:50px;
height:120%;
left:40px;
.one{
width:100%;
height:100%;
background:$b;
clip-path: polygon(0 0, 100% 0, 90% 100%, 10% 100%);
}
.two{
width:110%;
height:120px;
background:$g;
top:100%;
left:-15px;
clip-path: polygon(61% 0, 0 0, 84% 62%);
animation:feet 1s ease-in-out infinite alternate;
transform:scaleX(-1);
@keyframes feet{
to{
clip-path: polygon(61% 0, 0 0, 100% 51%);
}
}
}
}
&:nth-of-type(2){
left:auto;
right:40px;
.two{
left:10px;
transform:scaleX(1);
animation-delay:0.25s;
}
}
}
}
&.frank{
.part{
&:first-of-type{
width:60px;
height:120%;
background:$b;
left:40px;
box-shadow:100px 0 0 $b;
top:0px;
.one, .two{
position:absolute;
width:120px;
height:50px;
bottom:-40px;
background:radial-gradient(circle at bottom right, $r 30px, $b 30px, $b 32px, $t 32px), linear-gradient(to right, $r 40px, $b 40px, $b 42px, $r 42px);
right:0;
border-radius:50px 0 0 50px;
}
.two{
right:auto;
left:100px;
border-radius:0 50px 50px 0;
background:radial-gradient(circle at bottom left, $r 30px, $b 30px, $b 32px, $t 32px), linear-gradient(to left, $r 40px, $b 40px, $b 42px, $r 42px);
}
}
}
}
&.witch{
.part{
&:first-of-type{
width:20px;
height:100%;
background:$g;
left:40px;
box-shadow:140px 0 0 $g;
.one, .two{
position:absolute;
width:100px;
height:80px;
background:$b;
clip-path: polygon(100% 50%, 0% 100%, 100% 100%);
bottom:0;
left:-80px;
}
.two{
left:140px;
clip-path: polygon(0 50%, 0% 100%, 100% 100%);
}
}
}
}
}
}
.body{
z-index:1;
clip-path: polygon(-25% -25%, 125% -25%, 125% 135%, -25% 135%);
> div{
&.drac{
.part{
&:first-of-type{
width:100%;
height:150%;
top:0;
left:0;
background:$b;
.one{
width: 0;
height: 0;
border-style: solid;
border-width: 150px 80px 0 80px;
left:40px;
border-color: $w transparent transparent transparent;
}
.two{
width:12.5px;
height:12.5px;
border-radius:100%;
background:$b;
top:35px;
left:calc(50% - 6.25px);
box-shadow:0 25px 0 $b, 0 50px 0 $b;
}
}
&:nth-of-type(2){
width:70px;
height:70px;
background:$r;
clip-path: polygon(50% 45%, 100% 25%, 100% 75%, 50% 55%, 0% 75%, 0% 25%);
left:calc(50% - 35px);
top:-15px;
animation:spin 6s ease-in-out infinite;
@keyframes spin{
95%{
transform:rotate(0deg);
}
100%{
transform:rotate(900deg);
}
}
}
&:nth-of-type(3){
width:100%;
height:100%;
left:0;
top:0;
.one, .two{
width:75%;
height:75%;
left:calc(100% - 20px);
background:$b;
top:-25%;
clip-path: polygon(1% 58%, 50% 1%, 100% 59%, 86% 91%, 76% 59%, 62% 89%, 53% 60%, 41% 90%, 31% 61%);
transform-origin:left;
animation:flap1 0.5s ease-in-out infinite alternate;
@keyframes flap1{
to{
transform:rotate(10deg);
}
}
}
.two{
left:auto;
right:40px;
transform:scaleX(-1);
transform-origin:left;
animation:flap2 0.5s ease-in-out infinite alternate;
@keyframes flap2{
to{
transform:rotate(-10deg) scaleX(-1);
}
}
}
}
}
}
&.frank{
.part{
&:first-of-type{
width:110%;
height:140%;
background:linear-gradient(to bottom, $t 20px, $bl 20px), linear-gradient(to right, $t 7.5%, $bl 7.5%, $bl 92.5%, $t 92.5%);
top:-2.5px;
border-radius:25px 25px 0 0;
left:-5%;
clip-path: polygon(0 0, 100% 0, 95% 87%, 100% 93%, 100% 100%, 0 100%, 0 94%, 5% 87%);
.one{
position:absolute;
width:15px;
height:15px;
background:$b;
left:calc(50% - 2.5px);
border-radius:100%;
top:25px;
box-shadow:0 40px 0 $b, 0 80px 0 $b, 0 120px 0 $b;
}
}
&:nth-of-type(2), &:nth-of-type(3){
width:50px;
top:15px;
height:calc(100% - 10px);
background:$bl;
transform-origin:top;
transform:rotate(30deg);
left:-12.5px;
border-radius:20px 0 0 0 / 50px 0 0 0;
animation:swing 5s ease-in-out infinite alternate;
@keyframes swing{
to{
transform:rotate(20deg) translateY(-20px);
}
}
.one{
width:80px;
height:80px;
background:$y;
top:100%;
left:calc(50% - 35px);
clip-path: polygon(17% 0, 3% 60%, 8% 91%, 18% 93%, 18% 64%, 26% 50%, 28% 62%, 30% 78%, 37% 91%, 48% 93%, 41% 63%, 43% 49%, 51% 48%, 54% 67%, 58% 83%, 66% 94%, 74% 88%, 68% 65%, 64% 44%, 69% 37%, 79% 41%, 80% 57%, 79% 65%, 85% 71%, 94% 63%, 92% 34%, 85% 21%, 78% 0);
}
}
&:nth-of-type(3){
transform:scaleX(-1) rotate(30deg);
left:auto;
right:-12.5px;
animation:swing2 5s ease-in-out infinite alternate;
animation-delay:-1s;
@keyframes swing2{
to{
transform:scaleX(-1) rotate(20deg) translateY(-20px);
}
}
}
}
}
&.witch{
.part{
&:first-of-type{
width:165%;
left:-32.5%;
height:100%;
background:$b;
clip-path: polygon(20% 0, 80% 0, 100% 100%, 0% 100%);
}
&:nth-of-type(2), &:nth-of-type(3){
width: 0;
height: 0;
border-style: solid;
border-width: 0 30px 100px 30px;
border-color: transparent transparent $b transparent;
left:-10px;
transform-origin:top;
transform:rotate(50deg);
.one{
position:absolute;
width:40px;
height:20px;
background:$g;
border-radius:0 0 100px 100px;
top:100px;
left:-20px;
z-index:-1;
}
}
&:nth-of-type(3){
left:auto;
right:-10px;
transform:rotate(-50deg);
animation:wave 2s ease-in-out infinite;
@keyframes wave{
0%{
transform:rotate(-50deg);
}
20%{
transform:rotate(-50deg);
}
35%{
transform:rotate(-90deg) translateY(10px);
}
45%{
transform:rotate(-95deg) translateY(5px);
}
50%{
transform:rotate(-90deg) translateY(5px);
}
52.5%{
transform:rotate(-95deg) translateY(5px);
}
58%{
transform:rotate(-90deg) translateY(5px);
}
}
}
}
}
}
}
.head{
clip-path: polygon(0 -100%, 100% -100%, 100% 100%, 0% 100%);
z-index:2;
> div{
&.frank{
left:20%;
transform-origin:bottom;
.part{
&:first-of-type{
width:90%;
left:5%;
height:100%;
background:$y;
overflow:hidden;
filter:url(#jagged);
.one{
width:115%;
left:-12%;
top:5px;
height:35px;
filter:url(#jagged);
background:repeating-linear-gradient(to right, $t 0px, $t 20px, $y 20px, $y 28px, $t 28px, $t 45px, $t 45px),
linear-gradient(115deg, transparent 75%, transparent 75%) 0 0,
linear-gradient(245deg, transparent 75%, transparent 75%) 0 0,
linear-gradient(115deg, transparent 75%, $y 75%) 21px -44px,
linear-gradient(245deg, $b 75%, $y 75%) 21px -44px,
$y;
background-size: 100%, 46px 80px, 46px 80px, 46px 80px, 46px 80px, 46px 80px;
box-shadow:0 -5px 0 $b;
}
.two{
width:70%;
left:15%;
top:70px;
height:15px;
background:$b;
}
}
&:nth-of-type(2), &:nth-of-type(3){
width:50px;
height:25px;
border-radius:0 0 150% 150% / 0 0 250% 250%;
box-shadow:0 0 0 5px $b, inset 0 5px 0 0 $y, inset 0 10px 0 $b;
top:85px;
left:50px;
.one{
width:12.5px;
height:12.5px;
background:$g;
bottom:0;
left:calc(50% - 7.5px);
border-radius:100%;
}
}
&:nth-of-type(3){
left:auto;
right:50px;
.two{
width:30px;
height:50px;
background:$y;
left:-35px;
box-shadow:0 0 0 5px $b;
}
}
&:nth-of-type(5){
width:120px;
height:30px;
left:62.5px;
bottom:25px;
background:$b;
border-radius:500px 500px 0 0 / 250px 250px 0 0;
.one, .two{
width:92.5%;
height:5px;
background:$b;
left:-37.5%;
top:12.5px;
transform-origin:top;
transform:rotate(-45deg);
}
.two{
left:auto;
right:-37.5%;
transform:rotate(45deg);
}
}
&:nth-of-type(6), &:nth-of-type(7){
width:60px;
height:5px;
background:$b;
bottom:75px;
left:20px;
transform:rotate(-10deg);
.one{
width:5px;
height:15px;
background:$b;
top:calc(50% - 7.5px);
left:10px;
box-shadow:10px 0 0 $b, 20px 0 0 $b, 30px 0 0 $b;
}
.two{
width:20px;
height:60px;
background:$y;
transform:rotate(10deg);
top:-70px;
left:-15px;
}
}
&:nth-of-type(7){
left:auto;
right:20px;
transform:rotate(10deg);
.two{
transform:rotate(-10deg);
left:auto;
right:-15px;
}
}
&:nth-of-type(8){
width:20px;
height:20px;
background:$b;
bottom:20px;
left:-5px;
box-shadow:230px 0 0 $b;
.one, .two{
width:15px;
height:30px;
background:$b;
border-radius:100px 0 0 100px;
left:-15px;
top:-5px;
}
.two{
left:auto;
right:-240px;
border-radius:0 100px 100px 0;
}
}
&:nth-of-type(9){
width:160%;
height:50px;
left:-30%;
top:140px;
.one, .two{
width:50px;
height:100%;
clip-path: polygon(4% 89%, 33% 46%, 51% 56%, 91% 9%, 57% 78%, 35% 67%);
right:0;
&:before{
content:'';
position:absolute;
width:100%;
height:100%;
background:darken($w, 30%);
left:-100%;
animation:zap 1s ease-in-out infinite;
@keyframes zap{
50%{
transform:translateX(0);
}
100%{
transform:translateX(200%);
}
}
}
}
.two{
right:auto;
transform:scaleX(-1);
&:before{
animation-delay:0.25s;
}
}
}
}
}
&.witch{
.part{
&:first-of-type{
width: 0;
height: 0;
border-style: solid;
border-width: 0 120px 300px 120px;
border-color: transparent transparent $g transparent;
bottom:0;
left:calc(50% - 120px);
.one{
width: 0;
height: 0;
border-style: solid;
border-width: 0 62.5px 150px 62.5px;
border-color: transparent transparent $b transparent;
left:-62.5px;
top:0;
}
.two{
width:250px;
height:3px;
background:$b;
top:150px;
left:calc(50% - 125px);
}
}
&:nth-of-type(2){
width: 0;
height: 0;
border-style: solid;
border-width: 140px 38px 0 38px;
border-color: $b transparent transparent transparent;
z-index:2;
top:70px;
left:calc(50% - 38px);
.two{
width: 0;
height: 0;
border-style: solid;
border-width: 130px 32.5px 0 32.5px;
border-color: $g transparent transparent transparent;
z-index:1;
top:-140px;
left:-32.5px;
}
.one{
width:100px;
height:100px;
border:4px solid $b;
border-color:$t $b $b $t;
border-radius:100%;
left:-50px;
top:-135px;
transform:rotate(45deg);
}
}
&:nth-of-type(3){
width:30px;
height:30px;
background:radial-gradient(circle at center, $b, $b 5px, $w 5px);
background-position:50% 35px;
border-radius:100%;
top:75px;
left:55px;
border:4px solid $b;
box-shadow:92.5px 5px 0 -14px $b, 92.5px 0 0 -4px $w, 92.5px 0 0 0 $b;
animation:lookaround 3s ease-in-out infinite alternate;
@keyframes lookaround{
0%{
background-position:50% 35px;
box-shadow:87.5px 5px 0 -14px $b, 92.5px 0 0 -4px $w, 92.5px 0 0 0 $b;
}
50%{
background-position:calc(50% + 5px) 35px;
box-shadow:97.5px -5px 0 -14px $b, 92.5px 0 0 -4px $w, 92.5px 0 0 0 $b;
}
100%{
background-position:calc(50% - 5px) 30px;
box-shadow:92.5px 5px 0 -14px $b, 92.5px 0 0 -4px $w, 92.5px 0 0 0 $b;
}
}
}
&:nth-of-type(4), &:nth-of-type(5){
width:4px;
height:100px;
background:$b;
transform:rotate(35deg);
transform-origin:top;
top:70px;
left:60px;
.one, .two{
width:100%;
height:100%;
background:$b;
transform-origin:top;
transform:rotate(10deg);
}
.two{
transform:rotate(20deg);
}
}
&:nth-of-type(5){
transform:rotate(-35deg) scaleX(-1);
left:auto;
right:60px;
}
}
}
&.drac{
.part{
&:first-of-type{
width:100%;
height:100%;
background:$g;
border-radius:975px 975px 0px 0px / 1500px 1500px 0px 0px;
overflow:hidden;
.one{
width:160px;
height:150px;
background:$b;
border-radius:100%;
left:calc(50% - 155px);
top:-100px;
box-shadow:150px 0 0 $b;
}
.two{
width:30px;
height:30px;
box-shadow:5px 5px 0 0 $b;
top:80px;
left:105px;
transform:rotate(45deg);
}
}
&:nth-of-type(2){
height:35px;
width:80px;
background:linear-gradient(to bottom, $g 50%, $y 50%);
background-size:100% 160px;
background-position:50% 100%;
border-radius:0 0 200px 200px / 0 0 150px 150px;
top:80px;
left:35px;
box-shadow:90px 0 0 0 $y;
.one{
width:15px;
height:15px;
background:$r;
border-radius:100%;
bottom:0;
left:calc(50% - 7.5px);
box-shadow:90px 0 0 0 $r;
}
.two{
width:50px;
height:50px;
box-shadow:5px 5px 0 0 $b;
top:-60px;
left:60px;
transform:rotate(45deg);
}
}
&:nth-of-type(3){
height:75px;
width:150px;
background:$b;
border-radius:0 0 500px 500px;
top:130px;
left:45px;
.one, .two{
width: 0;
height: 0;
border-style: solid;
border-width: 45px 12.5px 0 12.5px;
border-color: $w transparent transparent transparent;
left:40px;
}
.two{
left:auto;
right:40px;
}
}
&:nth-of-type(4){
width:50px;
height:60px;
background:$g;
border-radius:100%;
z-index:-1;
top:85px;
left:-15px;
box-shadow:220px 0 0 $g;
}
&:nth-of-type(5){
width:15px;
height:15px;
left:75px;
bottom:45px;
.one, .two{
left:10px;
width:100%;
height:100%;
background:linear-gradient(to right, $t, $t calc(50% - 0.5px), $w calc(50% - 0.5px), $w calc(50% + 0.5px), $t calc(50% + 0.5px)), linear-gradient(to bottom, $t, $t calc(50% - 0.5px), $w calc(50% - 0.5px), $w calc(50% + 0.5px), $t calc(50% + 0.5px)), linear-gradient(45deg, $t, $t calc(50% - 0.5px), $w calc(50% - 0.5px), $w calc(50% + 0.5px), $t calc(50% + 0.5px)), linear-gradient(-45deg, $t, $t calc(50% - 0.5px), $w calc(50% - 0.5px), $w calc(50% + 0.5px), $t calc(50% + 0.5px));
animation:shine 3s ease-in-out infinite;
clip-path: circle(0% at 50% 50%);
top:5px;
@keyframes shine{
60%{
transform:rotate(0deg);
clip-path: circle(0% at 50% 50%);
}
80%{
transform:rotate(360deg);
clip-path: circle(50% at 50% 50%);
}
100%{
transform:rotate(360deg);
clip-path: circle(0% at 50% 50%);
}
}
}
.two{
top:-5px;
left:70px;
animation-delay:-1.25s;
}
}
}
}
}
}
}
}
!
