HTML
<div class="persp">
<img src=" " class="hook" width="75px" height="75px" alt="hook">
<div class="sea">
<div class="wave-1"></div>
<div class="wave-2"></div>
<div class="wave-3"></div>
<div class="wave-4"></div>
<div class="wave-5"></div>
</div>
<div class="sky"></div>
<img src=" " class="fish" width="50px" height="50px" alt="fish">
</div>
CSS
.persp{
width:500px;
height:350px;
margin: 50px auto;
border:1px solid;
perspective:500px;
perspective-origin:50% 50%;
position:relative;
}
.hook{
transform:translate(80px,50px);
z-index:5;
transform-origin:0% 0%;
animation:through-hook 7s linear 0.5s infinite;
}
.fish{
position:absolute;
top:65%;
right:20%;
z-index:5;
}
.sea{
width:100%;
height:50%;
position:absolute;
bottom:0;
background:navy;
opacity:0.4;
z-index:5;
/*lining-up the waves*/
columns:5 auto;
}
.sky{
width:100%;
height:50%;
position:absolute;
top:0;
background:yellow;
opacity:0.1;
}
.sea div{
border:1px solid white;
width:50px;
height:50px;
border-radius:50%;
background:navy;
opacity:0.4;
}
@keyframes through-hook{
0%{
transform:translate(80px,50px);
}
25%{
transform:translate(80px,220px);
}
50%{
transform:translate(80px,190px);
}
70%{
transform:translate(80px,230px);
}
}
