Mountains

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;} }
JAVASCRIPT
Expand for more options Login