如何使用CSS平滑上下移动图像？

我是CSS中的初学者，是否可以使用CSS顺利地上下移动图像？如何使用CSS平滑上下移动图像？

以下链接类似：

....

2014-11-25 S.M_Emamian

1.你尝试过这么远吗？你能提供一些代码吗？ 2.你也需要javascript来实现这个 – Nick 2014-11-25 09:52:27

@Nick - 没有必要使用JavaScript，这可以通过CSS使用'@keyframes'完成。 – 2014-11-25 09:53:45

@ chipChocolate.py那么，告诉我如何..？到目前为止，我知道你不能计算在CSS中的偏移量，**编辑：哦..我想他的意思是当你滚动时移动的背景，我的坏，你是对的，这可以通过关键帧完成** – Nick 2014-11-25 09:55:30

使用CSS3动画。

段：

img { 
 
    -webkit-animation: mover 2s infinite alternate; 
 
    animation: mover 2s infinite alternate; 
 
} 
 
@-webkit-keyframes mover { 
 
    0% { transform: translateY(0); } 
 
    100% { transform: translateY(-20px); } 
 
} 
 
@keyframes mover { 
 
    0% { transform: translateY(0); } 
 
    100% { transform: translateY(-20px); } 
 
}

<img src="http://app.netbarg.com/img/phone-in-hand-a.png" />

来源

2014-11-25 09:55:39 Abhitalks

为了以防万一，我会添加'@ -moz-keyframes mover'和'@ -o-keyframes mover'。好的解决方案 – TCB13 2016-08-21 15:23:31

如何使用CSS平滑上下移动图像？

回答

相关问题