HTML
<div class="container">
<div class="sol"></div>
<div class="cerros">
<div class="c1"><div class="circ1"></div></div>
<div class="c2"><div class="circ2"></div></div>
<div class="c3"><div class="circ3"></div></div>
<div class="c4"><div class="circ4"></div></div>
<div class="c5"><div class="circ5"></div></div>
<div class="c6"><div class="circ6"></div></div>
<div class="c7"><div class="circ7"></div></div>
</div>
<div class="hill"></div>
<div class="hills">
<div class="h1"></div>
<div class="h2"></div>
<div class="h3"></div>
<div class="h4"></div>
<div class="h5"></div>
<div class="h6"></div>
</div>
<div class="hills7">
<div class="hl1"></div>
<div class="hl2"></div>
<div class="hl3"></div>
<div class="hl4"></div>
<div class="hl5"></div>
<div class="hl6"></div>
</div>
<div class="hill3">
<div class="ciervo">
<div class="head">
<div class="orejas"></div>
<div class="orejas3"></div>
<div class="cuernos">
<span class="c12"></span>
<span class="c21"></span>
</div>
<div class="cuernos3">
<span class="c12"></span>
<span class="c21"></span>
</div>
</div>
<div class="cuello"></div>
<div class="legs3"></div>
<div class="legs9"></div>
<div class="body"></div>
<div class="legs"></div>
<div class="legs7"></div>
<div class="cola"></div>
</div>
</div>
</div>
CSS
body{
background:black;
}
.container{
position:relative;
width:800px;
height:600px;
background:#6BD0FC;
margin:90px auto;
overflow:hidden;
}
.sol{
position:absolute;
width:231px;
height:231px;
border-radius:100%;
background:#ffe5aa;
box-shadow:0 0 50px #FFf;
margin:30px 271px;
animation:brilla 3s alternate infinite;
}
.c1,.c2,.c3,.c4, .c5, .c6, .c7{
position:absolute;
border-radius:700px 700px 5000px 700px;
background:#12546b;
transform:rotate(45deg);
overflow:hidden;
}
.c1{
width:132px;
height:132px;
margin:330px -12px;}
.c2{
width:172px;
height:172px;
margin:271px 70px
}
.c3{
width:231px;
height:231px;
margin:231px 132px
}
.c4{
width:251px;
height:350px;
margin:132px 231px
}
.c5{
width:231px;
height:231px;
margin:251px 450px
}
.c6{
width:192px;
height:192px;
margin:271px 560px
}
.c7{
width:152px;
height:152px;
margin:300px 670px
}
.hill{
position:absolute;
width:800px;
height:90px;
background:#12546b;
margin:360px 0
}
.circ1,.circ2,.circ3{
position:absolute;
border-radius:100%;
background:#12495b;
}
.circ1{
width:70px;
height:60px;
margin:-12px 9px
}
.circ2{
width:90px;
height:70px;
margin:-9px 7px
}
.circ3{
width:121px;
height:70px;
margin:-9px 7px
}
.circ4,.circ5, .circ6, .circ7{
position:absolute;
border-radius:100%;
background:#12495b;
transform:rotate(90deg);
}
.circ4{
width:121px;
height:192px;
margin:-75px 55px;
}
.circ5{
width:50px;
height:70px;
margin:-21px 30px
}
.circ6{
width:70px;
height:90px;
margin:-40px 30px
}
.circ7{
width:70px;
height:90px;
margin:-40px 30px
}
.h1,.h2,.h3,.h4,.h5, .h6{
position:absolute;
width: 231px;
height:121px;
border-radius:231px 231px 0 0;
background:#54b7d8;
}
.h1{margin:400px -30px}
.h2{margin:412px 121px}
.h3{margin:400px 251px}
.h4{margin:409px 370px}
.h5{margin:421px 500px}
.h6{margin:400px 630px}
.hill3{
position:absolute;
width:800px;
height:90px;
background:white;
margin:512px 0
}
.hl1,.hl2,.hl3,.hl4,.hl5, .hl6{
position:absolute;
width: 231px;
height:121px;
border-radius:231px 231px 0 0;
background:#9dd5ea;
}
.hl1{margin:450px -30px}
.hl2{margin:470px 121px}
.hl3{margin:450px 251px}
.hl4{margin:440px 370px}
.hl5{margin:450px 500px}
.hl6{margin:470px 630px}
.ciervo{
position:absolute;
margin:-162px 370px;
transform:scale(.35)
}
.head{
position:absolute;
width: 70px;
height: 90px;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
background:#eaeaea;
margin:90px 90px;
animation:gira 3s alternate infinite;
}
.cuello{
position:absolute;
border-bottom: 102px solid #eaeaea;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
height: 0;
width: 25px;
margin:152px 102px
}
.orejas{
position:absolute;
width:21px;
height:21px;
border-radius:30px 300px 30px 300px;
background:#eaeaea;
margin:25px -13px;
transform:rotate(-12deg)
}
.orejas::before{
content:"";
position:absolute;
width:21px;
height:21px;
border-radius:300px 30px 300px 30px;
background:#eaeaea;
margin:17px 73px;
transform:rotate(24deg)
}
.body{
position:absolute;
width:192px;
height:90px;
border-radius: 0 0 321px 321px;
background:#eaeaea;
margin:251px -41px;
}
.body::before{
content:"";
display:block;
width: 142px;
height: 221px;
border-bottom: 50px solid #eaeaea;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-radius: 152px / 121px;
margin:-225px -21px
}
.body::after{
content:"";
position:absolute;
width:63px;
height:63px;
border-radius:100%;
background:#eaeaea;
margin:155px -3px
}
.legs{
position:absolute;
border-top: 172px solid #eaeaea;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
height: 0;
width: 12px;
margin:300px 70px ;
transform: rotate(9deg);
}
.legs3{
position:absolute;
border-top: 185px solid #eaeaea;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
height: 0;
width: 12px;
margin:291px 112px ;
transform: rotate(-12deg);
}
.legs7{
position:absolute;
width:90px;
height:45px;
border-radius:0 0 132px 132px;
background:#eaeaea;
margin:251px -70px;
transform:rotate(90deg)
}
.legs7::before{
content:"";
position:absolute;
border-top: 192px solid #eaeaea;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
height: 0;
width: 12px;
margin:-45px 132px ;
transform: rotate(-75deg);
}
.legs9{
position:absolute;
border-top: 172px solid #eaeaea;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
height: 0;
width: 12px;
margin:300px -7px ;
transform: rotate(-9deg);
}
.cola{
position:absolute;
width:70px;
height:95px;
border-radius:100%;
border-left:21px solid #eaeaea;
margin:225px -69px;
transform:rotate(35deg);
animation:sube 3s alternate infinite;
}
.cuernos,.cuernos3{
position:absolute;
width:172px;
height:172px;
border-radius:100%;
border-bottom:12px solid #eaeaea;
}
.cuernos{
position:absolute;
margin:-145px -43px;
}
.cuernos3{
position:absolute;
margin:-147px -40px;
transform:scale(.7)
}
.c12{
position:absolute;
width:50px;
height:50px;
border-radius:100%;
border-right:7px solid #eaeaea;
margin:121px 90px;
transform:rotate(-21deg)
}
.c12::before{
content:"";
position:absolute;
width:50px;
height:50px;
border-radius:100%;
border-right:7px solid #eaeaea;
margin:30px 50px;
transform:rotate(-70deg)
}
.c21{
position:absolute;
width:50px;
height:50px;
border-radius:100%;
border-left:7px solid #eaeaea;
margin:121px 30px;
transform:rotate(0deg)
}
.c21::before{
content:"";
position:absolute;
width:50px;
height:50px;
border-radius:100%;
border-right:7px solid #eaeaea;
margin:7px -73px;
transform:rotate(-93deg)
}
@keyframes gira{
0%{transform:rotate(-3deg)}
50%{transform:rotate(3deg)}
}
@keyframes sube {
0%{transform:translateY(0px) translateX(0px) rotate(35deg)}
50%{transform: translateY(3px) translateX(-5px) rotate(35deg)}
}
@keyframes brilla{
0%{box-shadow:0 0 50px #FFf;}
50%{box-shadow:0 0 12px #FFf;}
}
