Desert (Only CSS)

HTML
<div class="container"> <div class="desert"> <div class="stars"> <span class="s1"></span> <span class="s2"></span> <span class="s3"></span> <span class="s4"></span> <span class="s5"></span> <span class="s6"></span> <span class="s7"></span> </div> <div class="nubes"></div> <div class="nubes3"></div> <div class="nubes7"></div> <div class="nubes9"></div> <div class="nubes12"></div> <div class="sol"></div> <div class="cerros"> <div class="cerro12"> <div class="cerro21"></div> </div> <div class="cerro"> <div class="cerro3"></div> </div> <div class="cerro7"> <div class="cerro9"></div> </div> </div> </div> </div>
CSS
body{ background:black; } .container{ position:relative; width:800px; height:600px; background:#190721; padding-top:50px; margin:90px auto; } .desert{ position:relative; width:300px; height:550px; background: -webkit-linear-gradient(top, rgba(86,1,39,1) 0%,rgba(145,2,2,1) 47%,rgba(241,116,50,1) 100%); background: linear-gradient(to bottom, rgba(86,1,39,1) 0%,rgba(145,2,2,1) 47%,rgba(241,116,50,1) 100%); margin:0px auto; overflow:hidden } .sol{ position:absolute; width:60px; height:60px; background: -webkit-linear-gradient(top, rgba(241,116,50,1) 0%,rgba(241,116,50,0.26) 64%,rgba(241,116,50,0) 86%); background: linear-gradient(to bottom, rgba(241,116,50,1) 0%,rgba(241,116,50,0.26) 64%,rgba(241,116,50,0) 86%); border-radius:100%; box-shadow:-3px -5px 35px rgb(255, 149,73); margin:162px 172px } .nubes,.nubes3,.nubes7,.nubes9,.nubes12{ position:absolute; width:50px; height:50px; border-radius:100%; background: -webkit-linear-gradient(top, rgba(241,116,50,.3) 0%,rgba(241,116,50,0) 43%,rgba(241,116,50,0) 73%); background: linear-gradient(to bottom, rgba(241,116,50,.3) 0%,rgba(241,116,50,0) 43%,rgba(241,116,50,0) 73%); } .nubes{margin: 142px 192px;} .nubes3{margin: 212px 132px;} .nubes7{margin: 102px 12px;} .nubes9{margin: 291px 12px;} .nubes12{margin: 360px 192px;} .nubes::before,.nubes3::before,.nubes7::before,.nubes9::before,.nubes12::before{ content:""; position:absolute; width:40px; height:40px; border-radius:100%; background: -webkit-linear-gradient(top, rgba(241,116,50,.3) 0%,rgba(241,116,50,0) 43%,rgba(241,116,50,0) 73%); background: linear-gradient(to bottom, rgba(241,116,50,.3) 0%,rgba(241,116,50,0) 43%,rgba(241,116,50,0) 73%); margin: -7px 30px; } .nubes::after,.nubes3::after,.nubes7::after,.nubes9::after,.nubes12::after{ content:""; position:absolute; width:40px; height:40px; border-radius:100%; background: -webkit-linear-gradient(top, rgba(241,116,50,.3) 0%,rgba(241,116,50,0) 43%,rgba(241,116,50,0) 73%); background: linear-gradient(to bottom, rgba(241,116,50,.3) 0%,rgba(241,116,50,0) 43%,rgba(241,116,50,0) 73%); margin: 12px 50px; } .cerro,.cerro7,.cerro12{ position:absolute; width:261px; height:261px; border-radius:30px 0 0 0; background: -webkit-linear-gradient(-45deg, rgba(255,60,53,1) 0%,rgba(142,23,2,1) 43%); background: linear-gradient(135deg, rgba(255,60,53,1) 0%,rgba(142,23,2,1) 43%); transform:rotate(45deg); overflow:hidden } .cerro{margin:450px 21px;} .cerro7{ margin:450px -53px; transform:rotate(45deg) scale(.7); } .cerro3,.cerro9,.cerro21{ position:absolute; width:231px; height:231px; border-radius:100%; background: -webkit-linear-gradient(-45deg, rgba(109,16,2,1) 66%,rgba(255,60,53,1) 100%); background: linear-gradient(135deg, rgba(109,16,2,1) 66%,rgba(255,60,53,1) 100%); margin:-9px -162px } .cerro12{ transform:rotate(45deg) scale(.5); margin:412px 121px } .s1,.s2,.s3,.s4,.s5,.s6,.s7{ position:absolute; width:9px; height:9px; border-radius:100%; background: -webkit-radial-gradient(center, ellipse cover, rgba(255,199,117,1) 0%,rgba(249,149,0,0.68) 46%,rgba(249,149,0,0.31) 98%); background: radial-gradient(ellipse at center, rgba(255,199,117,1) 0%,rgba(249,149,0,0.68) 46%,rgba(249,149,0,0.31) 98%); box-shadow:0px 0px 9px rgba(255,255,255,.7); } .s1{ margin:21px 60px; animation:brilla 1.2s alternate infinite; } .s2{ margin:70px 90px; transform:scale(.7); animation:brilla .9s alternate infinite; } .s3{ margin:40px 142px; animation:brilla .7s alternate infinite; } .s4{ margin:70px 201px; transform:scale(.7); animation:brilla .6s alternate infinite; } .s5{ margin:21px 231px; animation:brilla .8s alternate infinite; } .s6{ margin:50px 12px; transform:scale(.9); animation:brilla .6s alternate infinite; } .s7{ margin:50px 271px; transform:scale(.9); animation:brilla .6s alternate infinite; } @keyframes brilla{ 0%{opacity:0.3} 100%{opacity:1} }
JAVASCRIPT
Expand for more options Login