如何使用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平滑上下移動圖像？

回答

相關問題