Dear in the night (Only CSS)

HTML
<div class="container"> <div class="bosque"> <div class="luna"></div> <div class="stars"> <span class="s1"></span> <span class="s2"></span> <span class="s3"></span> <span class="s4"></span> <span class="s5"></span> </div> <div class="cerro"></div> <div class="ciervo"> <div class="head"><div class="orejas"></div><div class="orejas3"></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 class="cuernos"> <span class="c1"></span> <span class="c2"></span> </div> <div class="cuernos3"> <span class="c1"></span> <span class="c2"></span> </div> </div> </div> </div>
CSS
body{ background:black; } .container{ position:relative; width:800px; height:600px; background:#100321; margin:90px auto; padding-top:50px } .luna{ position:absolute; width:152px; height:152px; border-radius: 100%; box-shadow:0 0 90px #FFf; background:rgba(255,255,255,.7); margin:152px 80px } .bosque{ position:relative; width:300px; height:550px; background: -webkit-linear-gradient(top, rgba(8,0,15,1) 0%,rgba(38,28,66,1) 100%); background: linear-gradient(to bottom, rgba(8,0,15,1) 0%,rgba(38,28,66,1) 100%); margin:0px auto; box-shadow:5px 5px 3px rgba(0,0,0,.3); overflow:hidden; } .cerro{ position:absolute; width:350px; height:350px; border-radius:100%; background: -webkit-linear-gradient(top, rgba(117,56,112,1) 0%,rgba(117,56,112,0.97) 1%,rgba(53,17,36,0) 35%); background: linear-gradient(to bottom, rgba(117,56,112,1) 0%,rgba(117,56,112,0.97) 1%,rgba(53,17,36,0) 35%); margin:350px -21px } .ciervo{ position:absolute; margin:221px 142px; transform:scale(.3) } .head{ position:absolute; width: 70px; height: 90px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background:#100026; margin:90px } .cuello{ position:absolute; border-bottom: 102px solid #100026; 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:#100026; margin:25px -13px; transform:rotate(-12deg) } .orejas::before{ content:""; position:absolute; width:21px; height:21px; border-radius:300px 30px 300px 30px; background:#100026; margin:17px 73px; transform:rotate(24deg) } .body{ position:absolute; width:192px; height:90px; border-radius: 0 0 321px 321px; background:#100026; margin:251px -41px; } .body::before{ content:""; display:block; width: 142px; height: 221px; border-bottom: 50px solid #100026; 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:#100026; margin:155px -3px } .legs{ position:absolute; border-top: 172px solid #100026; 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 #100026; 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:#100026; margin:251px -70px; transform:rotate(90deg) } .legs7::before{ content:""; position:absolute; border-top: 192px solid #100026; 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 #100026; 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 #100026; margin:225px -69px; transform:rotate(35deg) } .cuernos,.cuernos3{ position:absolute; width:172px; height:172px; border-radius:100%; border-bottom:12px solid #100026; } .cuernos{ position:absolute; margin:-60px 40px; } .cuernos3{ position:absolute; margin:-55px 40px; transform:scale(.7) } .c1{ position:absolute; width:50px; height:50px; border-radius:100%; border-right:7px solid #100026; margin:121px 90px; transform:rotate(-21deg) } .c1::before{ content:""; position:absolute; width:50px; height:50px; border-radius:100%; border-right:7px solid #100026; margin:30px 50px; transform:rotate(-70deg) } .c2{ position:absolute; width:50px; height:50px; border-radius:100%; border-left:7px solid #100026; margin:121px 30px; transform:rotate(0deg) } .c2::before{ content:""; position:absolute; width:50px; height:50px; border-radius:100%; border-right:7px solid #100026; margin:7px -73px; transform:rotate(-93deg) } .s1,.s2,.s3,.s4,.s5{ position:absolute; border-radius:100%; background:white; box-shadow:0px 0px 1px 2px rgb(150,124,201); } .s1{ width:5px; height:5px; margin:30px 30px; animation:brilla 1.2s alternate infinite; } .s2{ width:5px; height:5px; margin:30px 261px; animation:brilla .9s alternate infinite; } .s3{ width:3px; height:3px; margin:12px 145px; animation:brilla .8s alternate infinite; } .s4{ width:3px; height:3px; margin:70px 90px; animation:brilla .7s alternate infinite; } .s5{ width:3px; height:3px; margin:70px 201px; animation:brilla .6s alternate infinite; } @keyframes brilla{ 0%{opacity:.3} 100%{opacity:1} }
JAVASCRIPT
Expand for more options Login