我怎样才能用CSS制作无限流畅的背景？

I'm just started to web programming, cuz many cooooool pages on awwwards.com - definitely caught my mind.

我刚刚开始进行网络编程,因为在awwwards.com上有很多cooooool页面 - 绝对引起了我的注意。

anyway, the first page what i aim for make is the pinterest (www.pinterest.com); slowly moving background with blur effect, floating modal and bottom fixed footer.

无论如何,第一页我的目标是pinterest(www.pinterest.com);缓慢移动背景模糊效果,浮动模态和底部固定页脚。

with some kinda O'Reilly books, the blur, modal and footer are no more problem. but i couldn't made the background even with them yet.

有些O'Leilly的书,模糊,模态和页脚都没有问题。但即便和他们在一起,我也无法做出背景。

so, how can i make horizontally infinite flowing background with only CSS??? (without JS)

所以,我怎么能只用CSS做水平无限流动的背景? (没有JS)

*conditions

the page is responsive, background-image's height should fit to screen

页面响应,背景图像的高度应适合屏幕
width follow the height's size, as original image's ratio.

宽度遵循高度的大小,作为原始图像的比例。

and here's my code.

这是我的代码。

  <head>
    	<style type="text/css">
    	* {
    		margin: 0;
    		padding: 0;
    	}
    	html {
    		height: 100%;
    	}
    	body {
    		overflow: hidden;
    	}
    	#animatedBackground {
    		position: absolute;
    		height: 100%;
    		width: 100%;
    		background: url("http://placehold.it/1600x800");
    		background-repeat: repeat;
    		background-position: 0 0;
    		background-size: auto 100%;

			border: 1px solid red;

    		animation: animatedBackground 5s linear infinite;
    	}
    	@keyframes animatedBackground {
    		from {
    			left: -50%;
    		}
    		to {
    			left: 50%;
    		}
    	}
    	</style>
    </head>
    
    <body>
    	<div id="animatedBackground">animatedBackground</div>
    </body>

thx.

3 个解决方案

#1

This should fit your slowly moving+infinite flowing+responsively fit to height background criteria.

这应该适合你缓慢移动+无限流动+响应适合高度背景标准。

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#animatedBackground {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: url("http://twibbon.s3.amazonaws.com/238/63bb30c8-2649-465e-9df1-ab2f8e5f7ecc.jpg");
  background-repeat: repeat;
  background-position: 0 0;
  background-size: auto 100%;
/*adjust s value for speed*/
  animation: animatedBackground 500s linear infinite;
}

@keyframes animatedBackground {
  from {
    background-position: 0 0;
  }
/*use negative width if you want it to flow right to left else and positive for left to right*/
  to {
    background-position: -10000px 0;
  }
}

<div id="animatedBackground">
</div>

#2

You can use background-attachment:scroll and use keyframes to perform the animation. See my approach here:

您可以使用背景附件:滚动并使用关键帧来执行动画。看我的方法:

CSS

html,body
    {
      background:url("http://twibbon.s3.amazonaws.com/238/63bb30c8-2649-465e-9df1-ab2f8e5f7ecc.jpg");
      background-repeat:repeat;
      background-attachment: scroll;
      position:absolute;
      left:0;
      top:0;
      animation: slideshow 10s linear infinite;
    }
    @keyframes slideshow
    {
      0% {top:0;}
      100% {top:-200%;}
      
    }

See here: jsfiddle

#3

Try This.

<html>
 <head>
    	<style type="text/css">
    	#animatedBackground {
    		position: absolute;
    		height: 100%;
    		width: 100%;
    		background: url("http://placehold.it/1600x800");
            animation:5s scroll infinite linear;
			border: 1px solid red;
			
    	}
    	@keyframes scroll{
  100%{
    background-position:-3000px 0px;
  }
}
    	</style>
    </head>
    
    <body>
    	<div id="animatedBackground" style="text-align:center;">animatedBackground</div>
    </body>
	</html>

#1