问HTML5 5/CSS3 3-如何制作“无止境”旋转背景- 360度全景图

EN

旋转背景的主要思想是画两个图像:一个在(x, 0)，另一个在(x - w, 0)，w是图像的宽度。随着时间的推移，您可以增加x，并且一旦x === w，您就可以重置x = 0。您不会在视觉上看到这种重置，因为第二个图像定位在与第一个图像完全相同的位置。重置后，你可以重新开始，使旋转看上去无止境。

(我使用两个假设为width of container <= width of image的图像。)

你可以使用例如：

• 画布：http://jsfiddle.net/yQMAG/这个动画在我的机器上有点不舒服。
• CSS3动画：http://jsfiddle.net/k5Bug/。

通过使用CSS3动画，您可以在不使用jquery的情况下做到这一点。我假设城市背景图像被设置为在集装箱上无缝地重复-x。

您设置您的关键帧动画背景图像，宽度的可重复图像，并告诉它无限循环，没有任何延迟。例如，我的漂流云图像是1456 px宽，并重复x：

@keyframes DriftingClouds {
    0%      { background-position: 0 0; }
    100%    { background-position: -1456px 0; }
}

#wrapper {
    background: url(/images/clouds.png) repeat-x 0 0;
    animation: DriftingClouds 165s linear infinite;
}

确保您设置了@-webkit-关键帧，@-moz-关键帧，@-o-关键帧和-webkit-动画，-moz-动画，-o动画与FF，Safari和Chrome相同。

http://jsfiddle.net/JQjGZ/

有解决方案，他们称之为“图像拼接”，人们已经为之制作插件。

http://www.jquery4u.com/plugins/jquery-360-degrees-image-display-plugins/

这款手机也很适合手机。http://spritespin.ginie.eu/examples.html