如何使用 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>
我使用过的编辑后的图片(黑色为透明)
我有一个项目,我需要制作一个动画,其中有一个水桶和一个扔进水桶的球,这样您就可以看到球进入这个水桶。为了让它工作,我有同一个桶的 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>
我使用过的编辑后的图片(黑色为透明)