HTML
<div class="container">
<div class="cont-sun">
<div class="sun"></div>
<div class="moon"></div>
</div>
<div class="cont-cactus">
<div class="body-cactus">
<div class="eye-left"></div>
<div class="eye-right"></div>
<div class="spina-1"></div>
<div class="spina-2"></div>
<div class="spina-3"></div>
<div class="spina-4"></div>
<div class="spina-5"></div>
<div class="spina-6"></div>
<div class="spina-7"></div>
<div class="mouth"></div>
</div>
<div class="left-hand"></div>
<div class="right-hand"></div>
</div>
<div class="cont-terrain">
<div class="terrain"></div>
<div class="se-terrain"></div>
</div>
<div class="mountain"></div>
<div class="tree"></div>
</div>
SCSS
html, body{
margin: 0;
background: #90CAF9;
overflow: hidden;
animation: sky-color 7s infinite linear;
}
.absolute-center{
margin: auto;
left: 0;
right: 0;
}
.container{
position: absolute;
@extend .absolute-center;
width: 600px;
height: 500px;
bottom: 0;
}
.cont-cactus{
position: absolute;
display: block;
width: 270px;
height: 270px;
bottom: 50px;
z-index: 50;
@extend .absolute-center;
.body-cactus{
position: absolute;
@extend .absolute-center;
border-top-left-radius: 55%;
border-top-right-radius: 55%;
border-bottom-right-radius: 40%120px;
border-bottom-left-radius: 40%120px;
width: 150px;
height: 190px;
background: red;
background: -webkit-linear-gradient(left, #1B5E20 , #66BB6A, #1B5E20);
background: -o-linear-gradient(right, #1B5E20, #66BB6A, #1B5E20);
background: -moz-linear-gradient(right, #1B5E20, #66BB6A, #1B5E20);
background: linear-gradient(to right, #1B5E20 , #66BB6A, #1B5E20);
bottom: 0;
z-index: 50;
animation: body-move 3s linear infinite;
&:after{
content: '';
display: block;
position: absolute;
height: 170px;
width: 40px;
border-radius: 50%;
border-left: 3px solid #DCE775;
opacity: 0.5;
left: 35px;
top: 10px;
}
&:before{
content: '';
display: block;
position: absolute;
height: 170px;
width: 40px;
border-radius: 50%;
opacity: 0.5;
border-right: 3px solid #DCE775;
right: 35px;
top: 10px;
}
.eye-left{
position: absolute;
width: 50px;
height: 50px;
background: white;
border-radius: 50%;
right: 17px;
top: 17px;
border: 2px solid #8BC34A;
z-index: 1;
&:after{
content: '';
display: block;
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
background: black;
margin: 15px;
}
&:before{
content: '';
display: block;
position: absolute;
width: 55px;
height: 12px;
background: #1B5E20;
-webkit-transform: rotateZ(-30deg);
transform: rotateZ(-30deg);
right: 5px;
border-radius: 10px 0px 5px 0;
animation: eye-move 7s infinite linear;
}
}
.eye-right{
position: absolute;
width: 50px;
height: 50px;
background: white;
border-radius: 50%;
left: 17px;
top: 17px;
border: 2px solid #8BC34A;
z-index: 1;
&:after{
content: '';
display: block;
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
background: black;
margin: 15px;
}
&:before{
content: '';
display: block;
position: absolute;
width: 55px;
height: 12px;
background: #1B5E20;
-webkit-transform: rotateZ(30deg);
transform: rotateZ(30deg);
left: 5px;
border-radius: 0 10px 0 5px;
animation: eye-move 7s infinite linear;
}
}
.mouth{
@extend .absolute-center;
position: absolute;
width: 70px;
height: 35px;
border: 3px solid #AED581;
background: red;
background: -webkit-radial-gradient(black, #33691E, #689F38);
background: -o-radial-gradient(black, #33691E, #689F38);
background: -moz-radial-gradient(black, #33691E, #689F38);
background: radial-gradient(black, #33691E, #689F38);
border-radius: 5px 5px 70% 70%;
top: 95px;
}
}
.right-hand{
position: absolute;
width: 45px;
height: 45px;
background: #2E7D32;
right: 0;
border-radius: 50%;
margin: 20px;
animation: dance-hand 7s infinite linear;
transform-origin: left bottom;
border: 3px solid #8BC34A;
&:before{
position: absolute;
content: '';
display: block;
width: 20px;
height: 40px;
background: #7CB342;
border-radius: 10px;
top: -15px;
left: -7px;
opacity: 0;
animation: eye-move 7s infinite linear;
}
&:after{
position: absolute;
content: '';
display: block;
width: 20px;
height: 40px;
background: #7CB342;
border-radius: 10px;
right: -7px;
top: -15px;
opacity: 0;
animation: eye-move 7s infinite linear;
}
}
.left-hand{
position: absolute;
width: 45px;
height: 45px;
background: #2E7D32;
border-radius: 50%;
margin: 20px;
animation: dance-hand 7s infinite linear;
transform-origin: right bottom;
border: 3px solid #8BC34A;
}
}
.cont-terrain{
position: absolute;
@extend .absolute-center;
bottom: -450px;
width:600px;
height: 600px;
border-radius: 50%;
overflow: hidden;
z-index: 15;
border: 3px solid #3E2723;
.terrain{
position: absolute;
top: 60px;
background: -webkit-linear-gradient(#A1887F, #4E342E);
background: -o-linear-gradient(#A1887F, #4E342E);
background: -moz-linear-gradient(#A1887F, #4E342E);
background: linear-gradient(#A1887F, #4E342E);
width: 100%;
height: 100px;
border-radius: 80% 80% 0 0;
&:after{
content: '';
display: block;
position: absolute;
@extend .absolute-center;
width: 100px;
height: 13px;
box-shadow: 0px 5px 20px 10px rgba(0,0,0,0.8);
border-radius: 50%;
background: rgba(0,0,0,0.8);
z-index: 30;
top: 35px;
}
}
.se-terrain{
position: absolute;
height: 100px;
width: 100%;
background: -webkit-linear-gradient(#FFA726, #FFE082);
background: -o-linear-gradient(#FFA726, #FFE082);
background: -moz-linear-gradient(#FFA726, #FFE082);
background: linear-gradient(#FFA726, #FFE082);
top: 0px;
z-index: 10;
border-radius: 50% 50% 0 0;
}
}
.spina{
position: absolute;
width: 3px;
height: 17px;
border-radius: 50% 50% 0 0;
background: #FDD835;
-webkit-transform: rotateZ(-40deg);
transform: rotateZ(-40deg);
}
.spina-rot{
position: absolute;
width: 3px;
height: 17px;
border-radius: 50% 50% 0 0;
background: #FDD835;
-webkit-transform: rotateZ(40deg);
transform: rotateZ(40deg);
right: 0;
}
.spina-1{
@extend .spina;
margin-left: 42px;
margin-top: 0px;
}
.spina-2{
@extend .spina;
margin-top: 75px;
margin-left: 25px;
}
.spina-3{
@extend .spina;
margin-top: 120px;
margin-left: 5px
}
.spina-4{
@extend .spina;
margin-top: 140px;
margin-left: 70px
}
.spina-5{
@extend .spina-rot;
margin-top: 7px;
margin-right: 25px
}
.spina-6{
@extend .spina-rot;
margin-top: 120px;
margin-left: 80px
}
.spina-7{
@extend .spina-rot;
margin-top: 80px;
margin-right: 30px
}
.cont-sun{
position: absolute;
@extend .absolute-center;
width: 300px;
height: 290px;
transform-origin: bottom center;
bottom: 180px;
-webkit-transform: rotateZ(-90deg);
transform: rotateZ(-90deg);
animation: sun-rotation 7s infinite linear;
.sun{
position: absolute;
@extend .absolute-center;
background: #F0F4C3;
width: 100px;
height: 100px;
top: 0px;
border: 10px solid #FFF59D;
animation: sun-color 7s infinite linear;
}
.moon{
position: absolute;
@extend .absolute-center;
border-left: 10px solid #F5F5F5;
width: 100px;
height: 100px;
bottom: -250px;
border-radius: 50%;
}
}
.mountain{
position: absolute;
bottom: 70px;
width: 80px;
height: 110px;
border-radius: 70% 10px 2px 1px;
box-shadow: 0 2px 5px #5D4037;
background: #3E2723;
z-index: 10;
right: 80px;
bottom: 35px;
-webkit-transform: rotateZ(25deg);
transform: rotateZ(25deg);
&:after{
content: '';
display: block;
position: absolute;
width: 110px;
height: 60px;
border-radius: 50px 2% 2px 1px;
border-left: 2px solid black;
box-shadow: 0 2px 5px #5D4037;
background: #3E2723;
top: 30px;
left: -75px;
}
}
.tree{
position: absolute;
z-index: 10;
left: 150px;
width: 3px;
height: 100px;
bottom: 80px;
-webkit-transform: rotateZ(-25deg);
transform: rotateZ(-25deg);
background: #BDBDBD;
border: 1px solid #FFE0B2;
box-shadow: 0px 3px 1px black;
z-index: 15;
&:after{
content: '';
display: block;
position: absolute;
width: 2px;
height: 35px;
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
background: #BDBDBD;
border: 1px solid #FFE0B2;
left: 13px;
}
&:before{
content: '';
display: block;
position: absolute;
width: 2px;
height: 20px;
-webkit-transform: rotateZ(-25deg);
transform: rotateZ(-25deg);
background: #BDBDBD;
border: 1px solid #FFE0B2;
right: 5px;
top: 30px;
}
}
@keyframes dance-hand{
0%{
-webkit-transform: rotateZ(0deg);
transform: rotateZ(0deg);
}
5%{
-webkit-transform: rotateZ(-40deg);
transform: rotateZ(-40deg);
}
10%{
-webkit-transform: rotateZ(40deg);
transform: rotateZ(40deg);
}
15%{
-webkit-transform: rotateZ(-15deg) scaleY(0.5);
transform: rotateZ(-15deg) scaleY(0.5);
}
20%{
-webkit-transform: rotateZ(15deg) scaleY(1.2);
transform: rotateZ(15deg) scaleY(1.2);
}
30%{
-webkit-transform: translateX(20px);
transform: translateX(20px);
}
40%{
-webkit-transform: translateY(40px);
transform: translateY(40px);
}
45%{
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
50%{
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
55%{
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
60%{
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
65%{
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
70%{
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
75%{
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
78%{
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
83%{
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
90%{
-webkit-transform: rotateZ(0deg);
transform: rotateZ(0deg);
}
}
@keyframes body-move{
0%{
height: 190px;
}
25%{
height: 200px;
}
50%{
height: 185px;
}
75%{
height: 195px;
}
100%{
height: 190px;
}
}
@keyframes eye-move{
0%{
opacity: 0;
}
25%{
opacity: 0;
}
42%{
opacity: 0;
}
45%{
opacity: 1;
}
90%{
opacity: 1;
}
95%{
opacity: 0;
}
100%{
opacity: 0;
}
}
@keyframes sun-rotation{
0%{
-webkit-transform: rotateZ(-90deg);
transform: rotateZ(-90deg);
}
100%{
-webkit-transform: rotateZ(270deg);
transform: rotateZ(270deg);
}
}
@keyframes sky-color{
0%{
background: #90CAF9;
}
75%{
background: #001a4d;
}
95%{
background: #90CAF9;
}
}
@keyframes sun-color{
0%{
background: #F0F4C3;
}
75%{
background: #FB8C00;
border: 10px solid #E65100;
}
95%{
background: #F0F4C3;
}
}
