<div class="geral">
<div class="laco_top"></div>
<div class="laco"></div>
<div class="simbolo_forma"></div>
<div class="simbolo">$</div>
<div class="saco_meio"></div>
</div>
<div class="moeda">$</div>
<div class="moeda1">$</div>
<div class="moeda2">$</div>
<div class="moeda3">$</div>
<div class="moeda4">$</div>



body{
  background:#E0FFFF;
}

.saco_meio{
  width:200px;
  height:200px;
  background:#006400;
  margin-left:400px;
  margin-top:200px;
  border-bottom-left-radius:20%;
  border-bottom-right-radius:20%;
  border-top-right-radius:100px;
  border-top-left-radius:100px; 
}
.simbolo_forma{
  position:absolute;
  margin-left:452px;
  margin-top:65px;
  width:100px;
  height:100px;
  background:white;
  border-radius:100%;
  font-size:100px;
  text-align:center;
}
.simbolo{
  position:absolute;
  margin-left:477px;
  margin-top:59px;
  font-size:100px;
}

@keyframes simbolo {
0% { opacity: 0; }
100% { opacity: 1; }
}

.simbolo:hover{
       animation: simbolo 3s ease-in-out; infinite;
    } 


.laco{
  position:absolute;
  width:55px;
  height:8px;
  border-radius:50%;
  margin-top:-15px;
  margin-left:462px;
  border: 10px solid transparent;
  border-bottom-color: yellow;
  transform: rotate(1deg);
}

.laco_top{
  position:absolute;
 width: 0; 
 height: 0; 
 border-left: 70px solid transparent;      border-right: 70px solid transparent;     border-top: 100px solid #006400;
  border-radius: 50%;    
  margin-left:430px;
  margin-top:-60px;
}
.moeda{
  width:80px;
  height:80px;
  background:yellow;
  border-radius:100%;
   animation: roda 3s linear infinite;
   position:absolute;
  margin-left:460px;
  margin-top:-370px;
  font-size:70px;
  text-align:center;
   border: 5px solid black;
}

.moeda1{
  width:80px;
  height:80px;
  background:yellow;
  border-radius:100%;
   animation: roda 3s linear infinite;
   position:absolute;
  margin-left:240px;
  margin-top:-320px;
  font-size:70px;
  text-align:center;
   border: 5px solid black;
}

.moeda2{
  width:80px;
  height:80px;
  background:yellow;
  border-radius:100%;
   animation: roda 3s linear infinite;
   position:absolute;
  margin-left:700px;
  margin-top:-320px;
  font-size:70px;
  text-align:center;
   border: 5px solid black;
}

.moeda3{
  width:80px;
  height:80px;
  background:yellow;
  border-radius:100%;
   animation: roda 3s linear infinite;
   position:absolute;
  margin-left:750px;
  margin-top:-110px;
  font-size:70px;
  text-align:center;
   border: 5px solid black;
}


.moeda4{
  width:80px;
  height:80px;
  background:yellow;
  border-radius:100%;
   animation: roda 3s linear infinite;
   position:absolute;
  margin-left:170px;
  margin-top:-110px;
  font-size:70px;
  text-align:center;
   border: 5px solid black;
}

@keyframes roda {
 0% {
  transform: rotateY(0deg);
 }
 100% {
  transform: rotateY(360deg);
 }
}



  
  
  

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.