css - 如何使用关键帧上下移动图像
问题描述
我希望我的图像以 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>
推荐阅读
- javascript - What I did wrong with object instantiation to "Uncaught RangeError: Maximum call stack size exceeded" error to be displayed and how to avoid it?
- karate - Using If condition to select data
- c++ - Main 的 Makefile 未定义参考(在 StackOverflow 上尝试过其他帖子)
- c# - Microsoft Azure Functions Nuget 包阻止 NET 库打包到 Nuget
- css - 如何在 React 组件 div 中显示背景图像?
- c# - 访问者模式在 API 中有什么好处?
- c - 如何使用指针来使用嵌入式 C 操作内存中特定寄存器的位
- java - Removing every 5th char in a string and return new String
- nginx - Nginx:获取 OAuth2 令牌
- jquery - 获取动态添加的表单字段的值返回错误的值