如何使用 css 制作这个可以将这个球扔进去的桶

How can I make this bucket where I can throw this ball into using css

我有一个项目,我需要制作一个动画,其中有一个水桶和一个扔进水桶的球,这样您就可以看到球进入这个水桶。为了让它工作,我有同一个桶的 2 张图片。数字 1 用于背面,nr。 2 是前面的,我有一个使用 background-image: cover 的想法,但我不知道如何让它工作,这是一个插图

这是我到目前为止与其他水桶图片的进步:

 .back {
        background-size: cover;      
        
    }
    
    .front {
    
    
    }
    
<div class="back"> <img src="behind.png" ></div>
<div class="front"> <img src="infront.png" ></div>

你至少需要两层,然后你才可以玩z-index。将鼠标悬停在下方查看:

.box {
   /* first layer as background */
   background:url(https://i.stack.imgur.com/WhSft.png) top/100% auto no-repeat;
   display:inline-block;
   width:200px; /* control the size by editing this */
   margin:80px 50px;
}
.box::before {
  content:"";
  display:block;
  padding-top:100%; /* keep square */
  position:relative;
  z-index:9; /* we increase z-index to make other element behind */
  background:inherit; /* we inherit the same background */
  background-position:bottom; /* we change the position to get the next image */
}


.ball {
   position:absolute;
   width:40px;
   height:40px;
   background:red;
   border-radius:50%;
   left:130px;
   top:0;
   transition:1s;
}

html:hover .ball{
  top:200px;
}
<div class="box">

</div>

<div class="ball"></div>

我使用过的编辑后的图片(黑色为透明)