html - 如何在CSS中的背景中滑动图像？

我正在尝试滑动this之类的背景图像。我要实现此效果here。

我已经使用了这些CSS属性

-webkit-animation: sliding 60s linear infinite;
background-attachment:scroll;

但不是为我工作。

请给我正确的方向。

最佳答案

为此，您需要keyframe animations。

@keyframes moveClouds {
    to {
        background-position: 100% 0;
    }
}
@-moz-keyframes moveClouds {
    to {
        background-position: 100% 0;
    }
}
@-webkit-keyframes moveClouds {
    to {
        background-position: 100% 0;
    }
}
#clouds {
    height:300px;
    width:600px;
    background: #FFF url(http://www.clipartbest.com/cliparts/Kin/eyg/Kineyg4RT.svg) repeat-x 0 0;
    animation: moveClouds 20s linear infinite;
    -ms-animation: moveClouds 20s linear infinite;
    -moz-animation: moveClouds 20s linear infinite;
    -webkit-animation: moveClouds 20s linear infinite;
}

Working Demo

关于html - 如何在CSS中的背景中滑动图像？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25111926/