使用CSS无限移动多个背景

本文介绍了使用CSS无限移动多个背景的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 我有两个背景： body { background-image：url（img / nemo.png） ，url（img / ocean.png）; } 如何使 nemo.png background 从左右无限移动但不影响 ocean.png背景？ EDIT：当他到达最右边（且图像不再可见）时，他将再次从左边缘出现，并开始从左到右漂移。解决方案这可以使用纯CSS 3来完成，例如 keyframed animations ： 演示： http://jsfiddle.net/dghsV/112 body { background-image：url（http://www.animaatjes.nl/disney-plaatjes/disney-plaatjes/finding-nemo/nemo11.gif），url （http://images2.layoutsparks.com/1/200022/ocean-dreams-blue-waves.jpg）; background-repeat：no-repeat; background-position：50％0％，0; -moz-animation：swim 2s linear 0s infinite; -webkit-animation：swim 2s linear 0s infinite; animation：swim 2s linear 0s infinite; } @ -moz-keyframes swim { from {background-position：200％0，0 0; } to {background-position：-100％0，0 0; } } @ -webkit-keyframes swim { from {background-position：200％0，0 0; } to {background-position：-100％0，0 0; } } @keyframes swim { from {background-position：200％0，0 0; } to {background-position：-100％0，0 0; } } 语法 animation ： animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction ; 此功能是试验性的，因此供应商前缀（例如 -webkit- ）（另见我可以使用CSS3动画了解兼容性说明）。在我的演示中，我使用了所有属性，除了最后一个。 I have two backgrounds:body { background-image: url(img/nemo.png),url(img/ocean.png);}How do I make nemo.png background move infinitely from left-right but not affecting ocean.png background?EDIT: When he reaches the right most edge (and the image is no longer visible), he will appear from the left edge again and start doing the drifting from left-to-right. 解决方案 This can be done with pure CSS 3, e.g keyframed animations:Demo: http://jsfiddle.net/dghsV/112body { background-image: url("http://www.animaatjes.nl/disney-plaatjes/disney-plaatjes/finding-nemo/nemo11.gif"), url("http://images2.layoutsparks.com/1/200022/ocean-dreams-blue-waves.jpg"); background-repeat: no-repeat; background-position: 50% 0%, 0; -moz-animation: swim 2s linear 0s infinite; -webkit-animation: swim 2s linear 0s infinite; animation: swim 2s linear 0s infinite;}@-moz-keyframes swim { from { background-position: 200% 0, 0 0; } to { background-position: -100% 0, 0 0; }}@-webkit-keyframes swim { from { background-position: 200% 0, 0 0; } to { background-position: -100% 0, 0 0; }}@keyframes swim { from { background-position: 200% 0, 0 0; } to { background-position: -100% 0, 0 0; }}Syntax animation : animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction;The feature is experimental, so vendor-prefixes (eg -webkit-) have to be added (see also Can I use CSS3 Animation for compatibility notes). In my demo, I've used all properties, except for the last one. 这篇关于使用CSS无限移动多个背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！