CSS控制圖片上下滑動的方法

在CSS中，我們可以使用動畫（animation）或者過渡（transition）來實現(xiàn)圖片的上下滑動，這里我們分別用這兩種方式來實現(xiàn)。

使用動畫實現(xiàn)

我們可以使用CSS的@keyframes規(guī)則來創(chuàng)建一個動畫，然后通過動畫屬性來應(yīng)用這個動畫到圖片上，我們可以創(chuàng)建一個名為“slide”的動畫，然后在圖片元素上應(yīng)用這個動畫。

HTML代碼：

<img id="myImage" src="image.png" />

CSS代碼：

@keyframes slide {
    0% { top: 0; }
    50% { top: 20px; }
    100% { top: 0; }
}
#myImage {
    position: relative;
    top: 0;
    animation: slide 2s infinite;
}

在這個例子中，圖片會上下移動20像素，移動時間為2秒，然后無限重復(fù)，你可以根據(jù)需要調(diào)整這些數(shù)值。

使用過渡實現(xiàn)

過渡是CSS中另一種實現(xiàn)動畫效果的方式，它可以在兩個狀態(tài)之間平滑過渡，我們可以使用過渡屬性來應(yīng)用過渡效果到圖片上，我們可以讓圖片在鼠標(biāo)懸停時上下滑動。

HTML代碼：

<img id="myImage" src="image.png" />

CSS代碼：

#myImage {
    position: relative;
    top: 0;
    transition: top 2s;
}
#myImage:hover {
    top: 20px;
}

在這個例子中，圖片會在鼠標(biāo)懸停時向上移動20像素，移動時間為2秒，你可以根據(jù)需要調(diào)整這些數(shù)值。