css - 背景图像动画

Question

有没有人建议如何以这种方式为超大背景图像设置动画：它应该从左到右、从上到下、从右到左然后再向上平滑移动。我希望通过下面的草图可以理解。

Answer 1

你会使用动画。

jsfiddle：http: //jsfiddle.net/XXUyj/4/

HTML：

<div id="bg"></div>

CSS：

#bg {
    left: 0;
    position: absolute;
    top: 0;
    width:100%;
    height: 100%;
    z-index: 60;
    background-image: url('http://superhaufen.de/earth.jpg');
    animation-duration: 10s;
    animation-name: slide;
    animation-iteration-count: infinite;
    background-size: 200% auto;
}
@keyframes slide {
    0% {background-position: 0 0;}
    25% {background-position: 100% 0;}
    50% {background-position: 100% 100%;}
    75% {background-position: 0 100%;}
    100% {background-position: 0 0;}
}

玩完后确保添加所有供应商前缀（@-moz-keyframes、@-ms-keyframes、@-webkit-keyframes 等）

这是带有供应商前缀的更新 jsfiddle ( http://jsfiddle.net/XXUyj/5/ )。我没有包括 microsoft，因为所有支持动画的 IE 版本都支持它们而没有供应商前缀，而且我没有包括 opera，因为我通常不包括。它没有足够的市场份额来保证额外的 CSS 大小，而且他们无论如何都会使用 webkit 的下一个版本。