<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);
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.