我怎样才能让无限流动的背景只有CSS？ [英] How can i make infinite flowing background with only CSS?
问题描述
我刚开始进行网络编程，因为awwwards.com上有很多cooooool页面 - 绝对引起我的注意。
无论如何，第一页我的目标是make是pinterest（www.pinterest.com）; 缓慢移动的背景，带有模糊效果，浮动模式和底部固定页脚。带有一些O'Reilly书籍，模糊，模式和页脚没有更多的问题。但我仍然无法使背景变为现实。
那么，我如何才能使水平无限流动背景只有CSS ？ ？ （没有JS）
*条件
-
页面响应，背景图像的高度应适合屏幕
-
宽度跟随高度的大小，与原始图像的比例一致。
这里是我的代码。
< class =snippet-code-html头> < style type =text / css> * {margin：0;填充：0; } html {height：100％; } body {overflow：hidden; } #animatedBackground {position：absolute;身高：100％;宽度：100％;背景：url（http://placehold.it/1600x800）;背景重复：重复; background-position：0 0; background-size：auto 100％;边框：1px纯红色;动画：animatedBackground 5s线性无限; } @keyframes animatedBackground {from {left：-50％; }到{left：50％; }}< / style> < /头> <身体GT; < div id =animatedBackground> animatedBackground< / div> < / body>
thx。
这应该适合你慢慢移动的+无限流动+响应性地适合高度背景标准。
html，body {height：100％;保证金：0; padding：0;}＃animatedBackground {width：100％;身高：100％;位置：绝对; top：0;左：0;背景：url（http://twibbon.s3.amazonaws.com/238/63bb30c8-2649-465e-9df1-ab2f8e5f7ecc.jpg）;背景重复：重复; background-position：0 0; background-size：auto 100％; / *调整速度值* / animation：animatedBackground 500s linear infinite;} @ keyframes animatedBackground {from {background-position：0 0; } / *使用负宽度，如果你想它从右向左流动，从左向右流动为正向* /到{background-position：-10000px 0; }}
< div id =animatedBackground> < / div>
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.
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>
这篇关于我怎样才能让无限流动的背景只有CSS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
