在CSS中，我們可以使用@keyframes規(guī)則來創(chuàng)建動(dòng)畫，從而實(shí)現(xiàn)圖片的滑動(dòng)效果，以下是一個(gè)簡(jiǎn)單的示例，展示了如何在CSS中讓圖片水平滑動(dòng)：

@keyframes slide {
  0% { transform: translateX(0); }
  100% { transform: translateX(100%); }
}
.image-container {
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 保持16:9的寬高比 */
  position: relative;
  overflow: hidden;
}
.image-container img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  animation: slide 5s linear infinite;
}

在這個(gè)示例中，我們創(chuàng)建了一個(gè)名為slide的動(dòng)畫，該動(dòng)畫將圖片在5秒內(nèi)水平滑動(dòng)100%，我們將該動(dòng)畫應(yīng)用到圖片元素上，并設(shè)置動(dòng)畫為無限循環(huán)。

為了實(shí)現(xiàn)圖片的垂直滑動(dòng)，我們可以將transform: translateX(100%)更改為transform: translateY(100%)，并將相應(yīng)的動(dòng)畫屬性應(yīng)用到圖片元素上，我們還需要確保圖片元素的寬度和高度與容器元素的寬度和高度相匹配，以避免在滑動(dòng)過程中出現(xiàn)拉伸或壓縮的情況。

需要注意的是，在實(shí)際應(yīng)用中，我們可能需要根據(jù)具體的需求對(duì)動(dòng)畫進(jìn)行調(diào)整和優(yōu)化，例如調(diào)整滑動(dòng)的速度、方向、起始位置等，我們還需要確保瀏覽器對(duì)CSS動(dòng)畫的支持，以避免在部分瀏覽器中出現(xiàn)兼容性問題。