How can i make infinite flowing background with only CSS?

问题

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

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.

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.

so, how can i make horizontally infinite flowing background with only CSS??? (without 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.

回答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>

来源：https://stackoverflow.com/questions/37903824/how-can-i-make-infinite-flowing-background-with-only-css

标签

html

css

css-animations