我希望我的图像以 top:0 开始,以 bottom:0 结束,动画流畅。我正在努力寻找解决方案。
非常清楚,我不能将背景图片用于 SEO 目的。也欢迎 JS 解决方案。
.element {
height: 200px;
width: 400px;
background-color: red;
position: relative;
margin: auto;
overflow: hidden;
}
.element img {
animation: nudge 5s linear infinite alternate;
position: absolute;
top: 0;
left: 0;
}
@keyframes nudge {
0%, 100% {
top: 0;
bottom: auto;
}
50% {
bottom: 0%;
top: auto;
}
}
<div class="element">
<img src="https://www.neelnetworks.com/wp-content/uploads/2018/08/ecommerce-bg.png" alt=""></div>
最佳答案
与其尝试在顶部和底部设置动画,不如在 translateY 上设置动画并使用顶部将其向下移动,这样它就不会离开屏幕
.element {
height: 200px;
width: 400px;
background-color: red;
position: relative;
margin: auto;
overflow: hidden;
}
.element img {
animation: nudge 2s linear infinite alternate;
position: absolute;
top: 0;
transform: translateY(0);
}
@keyframes nudge {
100% {
transform: translateY(-100%);
top: 100%;
}
}
<div class="element"><img src="https://www.neelnetworks.com/wp-content/uploads/2018/08/ecommerce-bg.png" alt=""></div>
关于css - 如何使用关键帧上下移动图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52276386/