.switch
input(type="checkbox" id="toggle")
label(for="toggle")
.pumpkin-container
.eyes-n-nose
.mouth-n-teeths
.vampire-container
.eyes
.mouth
.teeths
.tongue
View Compiled
@import url('https://fonts.googleapis.com/css?family=Kodchasan');
// center
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
overflow: hidden;
background: #081219;
}
* {
font-family: 'Kodchasan';
}
.switch {
input[type=checkbox] {
display:none;
&:checked + label {
border-color: #4D7C99;
&:before {
content: 'Vampire';
color: #4D7C99;
font-size: 50px;
text-transform: uppercase;
position: absolute;
left: 25%;
transform: translateX(-25%);
line-height: 190px;
transition: .5s ease;
z-index: 0;
}
}
&:checked + label .pumpkin-container {
left: calc(100% - 5px);
transform: translateX(-100%);
opacity: 0;
}
&:checked + label .vampire-container {
left: calc(100% - 5px);
transform: translateX(-100%);
opacity: 1;
}
}
label {
border: 3px solid #E56D48;
cursor: pointer;
height: 200px;
border-radius: 200px;
display: flex;
width: 600px;
position: relative;
transition: .5s ease-in-out;
&:before {
content: 'Pumpkin';
color: #E56D48;
font-size: 50px;
text-transform: uppercase;
position: absolute;
left: 70%;
transform: translateX(-70%);
line-height: 190px;
transition: .5s ease;
z-index: 0;
}
.pumpkin-container {
background: #E56D48;
width: 190px;
height: 190px;
position: absolute;
border-radius: 190px;
left: 5px;
top: 5px;
overflow: hidden;
transition: .5s ease;
opacity: 1;
.eyes-n-nose {
background: #330A0F;
position: absolute;
left: 50%;
top: 30%;
transform: translate(-50%, -30%);
width: 0;
height: 0;
border-style: solid;
border-width: 0 16px 32px 16px;
border-color: #E56D48 #E56D48 #330A0F #E56D48;
&:before,
&:after {
content: '';
background: #330A0F;
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
top: 10px;
left: 0;
}
&:before {
margin-left: -65px
}
&:after {
margin-left: 45px
}
}
.mouth-n-teeths {
height: 65px;
width: 65px * 2;
background: #330A0F;
bottom: 0;
position: absolute;
left: 50%;
transform: translate(-50%, -35%);
border-bottom-left-radius: 65px * 2;
border-bottom-right-radius: 65px * 2;
&:before,
&:after {
content: '';
position: absolute;
background: #E56D48;
height: 15px;
width: 20px;
}
&:before {
left: 25px;
top: -1px
}
&:after {
right: 25px;
bottom: 0;
height: 20px;
}
}
}
.vampire-container {
background: #4D7C99;
width: 190px;
height: 190px;
position: absolute;
border-radius: 190px;
left: 5px;
top: 5px;
overflow: hidden;
transition: .5s ease;
opacity: 0;
&:before,
&:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: #C2DEF2;
border-radius: 45% 45% 0 0;
top: 15px;
}
&:before {
left: -80px;
}
&:after {
right: -80px;
}
.eyes {
position: absolute;
left: 50%;
top: 30%;
transform: translate(-50%, -30%);
z-index: 1;
&:before,
&:after {
content: '';
background: #D63E49;
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
top: 0;
left: 0;
}
&:before {
margin-left: -65px
}
&:after {
margin-left: 45px
}
}
.mouth {
height: 65px;
width: 65px * 2;
background: #330A0F;
bottom: 0;
position: absolute;
left: 50%;
transform: translate(-50%, -35%);
border-bottom-left-radius: 65px * 2;
border-bottom-right-radius: 65px * 2;
overflow: hidden;
z-index: 1;
.teeths {
background: #FFFAE6;
width: 100%;
position: absolute;
left: 0;
top: -1px;
height: 20px;
&:before,
&:after {
content: '';
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 13.0px 7.5px 0 7.5px;
border-color: #fffae6 transparent transparent transparent;
top: 19px;
}
&:before {
left: 20px;
}
&:after {
right: 20px;
}
}
.tongue {
height: 35px;
width: 35px * 2;
background: #D63E49;
bottom: -15px;
position: absolute;
left: 50%;
transform: translate(-50%, -35%);
border-top-left-radius: 35px * 2;
border-top-right-radius: 35px * 2;
}
}
}
}
}
@keyframes pseudo-move {
0% {opacity: 0}
100% {opacity: 1}
}
View Compiled
//https://dribbble.com/shots/1789464-It-s-Halloween
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.