我想制作如下动画:
一个 div 有 2 个相同的箭头,悬停时第一个箭头应该向左/向右移动。我尝试这样做,但没有成功。我正在使用 2 张图片设置背景,但如何为其中一张图片(如 gif)设置动画?
.arrow-right2 {
content: "";
background: transparent url(https://i.imgur.com/u7cYXIo.png) 0 -185px no-repeat, transparent url(https://i.imgur.com/u7cYXIo.png) 0 -185px no-repeat;
height: 35px;
position: absolute;
top: -5%;
left: 0;
width: 35px;
}
最佳答案
尝试使用具有相同箭头的 2 个不同的 div,使用绝对位置并使用它来重叠两个箭头。如果可以,请使用单个图像,而不是 Sprite 。然后在其中一张图像上应用悬停效果。
body {
background: red;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
position: relative;
}
.arrow1 {
background: url('https://i.imgur.com/u7cYXIo.png') no-repeat -17px -199px;
width: 12px;
height: 24px;
display: block;
left: 0;
position: absolute;
}
.arrow2 {
background: url('https://i.imgur.com/u7cYXIo.png') no-repeat -17px -199px;
width: 12px;
height: 24px;
display: block;
position: absolute;
transition: all 0.4s;
left: 0;
}
.arrow2:hover {
left: -10px;
transition: all 0.4s;
}
<div class="container">
<div class="arrow1">
</div>
<div class="arrow2">
</div>
</div>
关于css - 复制图像并设置悬停 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53548053/