Comment puis-je créer un seau dans lequel je peux lancer cette balle en utilisant css ?

Question

J'ai un projet dans lequel je dois faire une animation où j'ai un seau et une balle qui se jette dans le seau pour qu'on puisse voir la balle aller dans le seau. Pour que cela fonctionne, j'ai deux images du même seau. J'ai eu l'idée d'utiliser background-image : cover mais je n'arrive pas à comprendre comment cela fonctionne, voici une illustration.

Voici les progrès que j'ai réalisés jusqu'à présent avec d'autres images de seaux :

 .back {
        background-size: cover;      

    }

    .front {

    }

<div class="back"> <img src="behind.png" ></div>
<div class="front"> <img src="infront.png" ></div>

Answer 1

Vous aurez besoin d'au moins deux couches, puis vous jouerez avec les éléments suivants z-index . Survolez les images ci-dessous pour les voir :

.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>

L'image que j'ai utilisée après édition (le noir est la transparence)