HTML
<div class="container">
<div class="hand">
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
<div class="d4"></div>
<div class="d5"></div>
</div>
<div class="agua"></div>
<div class="dagas">
<div class="daga"></div>
<div class="daga3"></div>
<div class="base"></div>
<div class="base3"></div>
</div>
</div>
CSS
body{
background:black;
}
.container{
position:relative;
width:800px;
height:600px;
background:#eaf0ff;
overflow:hidden;
margin:90px auto;
}
.agua{
position:absolute;
width:800px;
height:121px;
background:#91d2f8;
margin:500px 0
}
.dagas{
position:relative;
width:30px;
height:500px;
transform-origin:center center;
margin:21px auto;
transform:scale(.7);
animation:gira 3s alternate infinite;
}
.daga{
position:absolute;
border-top: 192px solid #aab9ae;
border-left: 9px solid transparent;
border-right: 9px solid transparent;
height: 0;
width: 30px;
}
.daga::before{
content:"";
position:absolute;
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 50px solid #aab9ae;
margin: -241px -10px
}
.daga3{
position:absolute;
border-top: 192px solid #9aa89e;
border-left: 9px solid transparent;
border-right: 0px solid transparent;
height: 0;
width: 16px;
}
.daga3::before{
content:"";
position:absolute;
width: 0;
height: 0;
border-bottom: 50px solid #9aa89e;
border-left: 25px solid transparent;
margin: -241px -10px
}
.base{
position:absolute;
width:65px;
height:30px;
border-radius:12px;
background:#63666b;
margin:192px -9px
}
.base::before{
content:"";
position:absolute;
width:25px;
height:25px;
border-radius:100%;
background:#ff566d;
margin:2px 21px
}
.base::after{
content:"";
position:absolute;
width:12px;
height:12px;
border-radius:100%;
background:#f99db3;
margin:3px 25px
}
.base3{
position:absolute;
width:25px;
height:50px;
background:#63666b;
margin:221px 12px;
box-shadow: inset 2px 2px 1px #63666b,
inset 2px 3px 5px rgba(0,0,0,0.3),
inset -2px -3px 5px rgba(255,255,255,0.5);
}
.base3::before{
content:"";
position:absolute;
width:53px;
height:35px;
border-radius:50px ;
background:#63666b;
margin:33px -14px
}
.base3::after{
content:"";
position:absolute;
width:17px;
height:14px;
border-radius:100%;
background:#aab9ae;
margin:43px 0px
}
.hand{
position:absolute;
width:50px;
height:50px;
border-radius:16px;
background:#fccf97;
margin:550px 380px;
animation:sube 3s alternate infinite;
}
.hand::before{
content:"";
position:absolute;
width:25px;
height:40px;
background:#fccf97;
margin:50px 13px
}
.d1,.d2,.d3,.d4{
position:absolute;
width:12px;
border-radius:9px;
background:#fccf97;
}
.d1{
height:40px;
margin:-17px 0;
}
.d2{
height:60px;
margin:-30px 12px;
}
.d3{
height:60px;
margin:-40px 23px;
}
.d4{
height:60px;
margin:-35px 35px;
}
.d5{
position:absolute;
width:12px;
height:30px;
border-radius:12px;
background:#fccf97;
transform:rotate(45deg);
margin:0px 45px;
animation:sube3 3s alternate infinite;
}
@keyframes gira{
0%{transform:rotate(0deg) scale(.7) }
50%,70%{transform:rotate(360deg)scale(.7) }
80%, 90%, 100%{transform: translateY(162PX) scale(.7) }
}
@keyframes gira{
0%{transform:rotate(0deg) scale(.7) }
50%,70%{transform:rotate(360deg)scale(.7) }
80%, 90%, 100%{transform: translateY(162PX) scale(.7) }
}
@keyframes sube{
0%,50%{transform: translateY(0px) }
80%, 90%,100%{transform: translateY(-121PX) }
}
@keyframes sube3{
0%,50%,60%,70%,80%{transform:translateX(0px) translateY(0px) rotate(0deg); }
90%,100%{transform:translateX(-5px) translateY(0px) rotate(-12deg); }
}
