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);}}
