HTML5 / CSS3 – 如何制作“无尽的”旋转背景 – 360度全景
我有一个JPG图像与城市的360度视图（9000像素×1000像素）。 我需要创建一个具有无限旋转背景的页面 – 例如，给用户留下旋转的webcamera的印象。
第一部分 – 从图像的左侧滚动到右侧非常简单 – 只需使用jQuery.animate（…）。 但是我如何能够无缝地返回到图像的开头（在它完成359度转弯之后），所以用户不会注意到“跳跃”或类似的东西？
网上有任何例子吗？
我只针对HTML5 / CSS3（webkit）浏览器，我可以使用最新的jQuery。
谢谢。
旋转背景背后的主要思想是绘制两个图像：一个在(x, 0) ，另一个在(x - w, 0) ， w是图像的宽度。 你可以随着时间的推移增加x ，一旦x === w你重置x = 0 。 您不会在视觉上看到此重置，因为第二个图像位于与第一个图像完全相同的位置。 重置后，您可以重新开始，以便旋转看起来无穷无尽。
（假设width of container <= width of image图像width of container <= width of image我使用两个width of container <= width of image 。）
您可以使用例如：
- canvas： http ： //jsfiddle.net/yQMAG/ 。 这个动画在我的机器上有点不稳定。
- CSS3动画： http ： //jsfiddle.net/k5Bug/ 。
您可以使用CSS3动画在没有jquery的情况下执行此操作。 我假设城市背景图像设置为在容器上无缝重复x。
您可以设置关键帧，为背景图像设置可重复图像的宽度，并告诉它无限循环，无延迟。 例如，我的漂移云图像宽1456像素并重复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-keyframes，@ -moz-keyframes，@ -o-keyframes和-webkit-animation，-moz-animation，-o-animation设置为相同，以覆盖FF，Safari和Chrome。
那里有解决方案，他们称之为“图像拼接”，人们已经制作了插件。
http://www.jquery4u.com/plugins/jquery-360-degrees-image-display-plugins/
这个也非常适合移动设备。 http://spritespin.ginie.eu/examples.html
您可以使用背景位置和jquery动画function，请参阅示例：
在完整事件中将无限背景和动画从0设置为背景宽度，将背景位置设置为0并再次触发动画。
如果您只是针对webkit浏览器，则可以单独使用CSS3完成此操作。 CSS3内置了对动画的支持。 通过使用iteration-count属性指定“无限”，您的动画将永远持续下去……你明白了这一点;-)
@-webkit-keyframes rotateEndlessly { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } img { -webkit-animation-name: rotateEndlessly; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; }
当然，HTML中的图像：
您可以使用CSS动画来实现这种“环顾四周”效果 – 非常适合视差！
您可以设置背景并为其background-position设置动画，而不是添加多个图像并为其left设置动画等。
#bgscroll { background:url(/*some nice seamless texture*/); -moz-animation-duration: 13s; -moz-animation-name: bgscroll; -moz-animation-iteration-count: infinite; } @-moz-keyframes bgscroll{ from {background-position: 0 0;} to {background-position: 100% 0;} }
这适用于新的Gecko / Chromium浏览器（带有供应商前缀调整）; 拨弄