Question

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

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

有些O'Leilly的书，模糊，模态和页脚都没有问题。但即使还没有它，我也无法提供背景。

所以，我怎样才能使水平无限流动的背景只用CSS ??? （没有JS）

*条件

页面响应，背景图像的高度应适合屏幕
宽度遵循高度的大小，作为原始图像的比例。

这是我的代码。

  <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。

Answer 1

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

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>

Answer 2

您可以使用background-attachment:scroll并使用keyframes来执行动画。请看我的方法：

<强> 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%;}
      
    }

请参阅此处：jsfiddle

Answer 3

试试这个。

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

如何只使用CSS制作无限流畅的背景？

3 个答案: