Tree in desert

HTML
<div class="container"> <div class="arena"></div> <div class="arena3"></div> <div class="arena7"></div> <div class="oasis"></div> <div class="arboles"> <div class="hojas"> <div class="hojas1"></div> <div class="hojas2"></div> <div class="hojas3"></div> <div class="hojas4"></div> <div class="hojas5"></div> <div class="hojas6"></div> </div> </div> </div>
CSS
body{ background:black; } .container{ position:relative; width:300px; height:300px; background:#ffc889; border-radius:100%; border:12px solid #722C11; margin:90px auto; } .arena{ position:absolute; width:132px; height:65px; border-radius:121px 121px 0 0; background:#ffc889; margin:90px 3px; border-top:3px solid #C19268; } .arena::before{ content:""; position:absolute; width:152px; height:73px; border-radius:121px 121px 0 0; background:#ffc889; border-top:3px solid #C19268; margin:-9px 142px } .arena::after{ content:""; position:absolute; width:152px; height:73px; border-radius:121px 121px 0 0; background:#ffc889; border-top:3px solid #C19268; margin:-9px 70px } .arena3{ position:absolute; width: 0; height: 0; border-bottom: 132px solid #B77737; border-left: 70px solid transparent; margin:30px 35px } .arena3::before{ content:""; display:block; width: 0; height: 0; border-bottom: 132px solid #BA844E; border-right: 70px solid transparent; } .arena7{ position:absolute; width: 0; height: 0; border-bottom: 112px solid #B77737; border-left: 70px solid transparent; margin:50px 75px } .arena7::before{ content:""; display:block; width: 0; height: 0; border-bottom: 112px solid #BA844E; border-right: 70px solid transparent; } .oasis{ position:absolute; width:132px; height:30px; border-radius:100%; background:#7ACEEF; margin:192px 121px; border-top:3px solid #55A1ED; } .arboles{ position:absolute; border-bottom: 112px solid rgb(137,93,77);; border-left: 5px solid transparent; border-right: 5px solid transparent; height: 0; width: 12px; margin:102px 90px; } .hojas{ position:absolute; margin:0px -3px; } .hojas1,.hojas4{ position:absolute; width:75px; height:70px; border-radius:100%; border-top:12px solid #259157; } .hojas1{ margin:-21px 3px; animation:agita1 .9s alternate infinite; } .hojas4{ margin:-21px -66px; animation:agita4 .9s alternate infinite; } .hojas2, .hojas5{ position:absolute; width:75px; height:70px; border-radius:100%; border-top:12px solid #0AAD4E; } .hojas2{ margin:-12px 3px; transform:rotate(21deg); animation:agita2 .9s alternate infinite; } .hojas5{ margin:-12px -60px; transform:rotate(-21deg); animation:agita5 .9s alternate infinite; } .hojas3, .hojas6{ position:absolute; width:70px; height:70px; border-radius:100%; border-top:12px solid #259157; } .hojas3{ margin:-6px 0px; transform:rotate(12deg); animation:agita3 .9s alternate infinite; } .hojas6{ margin:-6px -53px; transform:rotate(-12deg); animation: agita6 .9s alternate infinite; } @keyframes agita1{ 0%{transform:rotate(0deg);} 100%{transform:rotate(-12deg);} } @keyframes agita2{ 0%{ transform:translateY(0px) translateX(0px);} 100%{transform:translateY(-2px) translateX(0px);} } @keyframes agita3{ 0%{ transform:translateY(0px) translateX(0px) rotate(12deg);;} 100%{transform:translateY(-3px) translateX(3px);}} @keyframes agita4{ 0%{transform:rotate(0deg);} 100%{transform:rotate(12deg);}} @keyframes agita5{ 0%{ transform:translateY(0px) translateX(0px) rotate(-21deg); ;} 100%{transform:translateY(-3px) translateX(-3px);}} @keyframes agita6{ 0%{ transform:translateY(0px) translateX(0px) rotate(-12deg); ;} 100%{transform:translateY(-3px) translateX(-3px);}}
JAVASCRIPT
Expand for more options Login