SCSS
@import "compass/css3";
body {
background-color: rgb(25, 25, 25);
}
h1 {
color: orange;
text-shadow: 2px 2px red;
text-align: center;
z-index: 100;
font-size: 70px;
font-family: "Creepster";
animation: creepyRotate 5s ease-in 1, bounceThatShit 2s 5s ease-in-out 1;
}
.pumpkin {
background-color: #a75012;
width: 600px;
height: 450px;
margin: 0 auto;
position: relative;
border-radius: 40%;
}
.stem {
width: 40px;
height: 50px;
background-color: green;
position: absolute;
left: 45%;
top: -50px;
}
.right-eye {
border-right: 60px solid transparent;
border-bottom: 80px solid #000;
border-left: 60px solid transparent;
width: 0;
height: 0;
position: absolute;
top: 100px;
right: 90px;
animation: pulsateEyes 2s ease-in infinite;
}
.nose {
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-top: 60px solid #000;
width: 0;
height: 0;
position: absolute;
top: 190px;
left: 50%;
transform: translateX(-50%);
animation: pulsateNose 2s ease-in infinite;
}
.left-eye {
border-right: 60px solid transparent;
border-bottom: 80px solid #000;
border-left: 60px solid transparent;
width: 0;
height: 0;
position: absolute;
top: 100px;
left: 90px;
animation: pulsateEyes 2s ease-in infinite;
}
.left-eye-half-circle {
}
.mouth {
padding-top: 50px;
height:45px;
width:250px;
margin: 0 auto;
display: block;
border-radius: 0px 0px 250px 250px;
background: #000;
position: absolute;
bottom: 50px;
left: 50%;
transform: translateX(-50%);
animation: pulsateMouth 2s ease-in infinite;
}
@keyframes creepyRotate {
0% {
font-size: 0px;
transform: rotate(0deg);
}
100% {
font-size: 70px;
transform: rotate(360deg);
}
}
@keyframes bounceThatShit {
0% {
font-size: 70px;
}
30% {
font-size: 100px;
}
100% {
font-size: 70px;
}
}
@keyframes pulsateEyes {
0%,100% {
border-bottom: 80px solid darken(#c56d00, 50);
//@include box-shadow(0 0 0 0 rgba(goldenrod, 0.75));
}
50% {
border-bottom: 80px solid #c56d00;
// @include box-shadow(0 0 3em 1em rgba(goldenrod, 0.75));
}
}
@keyframes pulsateNose {
0%,100% {
border-top: 80px solid darken(#c56d00, 50);
//@include box-shadow(0 0 0 0 rgba(goldenrod, 0.75));
}
50% {
border-top: 80px solid #c56d00;
// @include box-shadow(0 0 3em 1em rgba(goldenrod, 0.75));
}
}
@keyframes pulsateMouth {
0%,100% {
background: darken(#c56d00, 50);
//@include box-shadow(0 0 0 0 rgba(goldenrod, 0.75));
}
50% {
background: #c56d00;
// @include box-shadow(0 0 3em 1em rgba(goldenrod, 0.75));
}
}
