html - 我怎样才能制作这个桶，我可以用css把这个球扔进去

Question

我有这个元素，我需要制作一个动画，我有一个桶和一个球扔进桶里，这样你就可以看到球进入这个桶。为了使它起作用，我有同一个桶的 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>

Answer 1

你至少需要两层，然后你玩 z-index .将鼠标悬停在下方并查看:

.box {
   /* first layer as background */
   background:url(/image/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>

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