CSSだけで無限に流れる背景を作るにはどうすればいいですか？

私はちょうどawwwards.comのウェブプログラミング、cuz多くのcoooooolのページに始まった - 間違いなく私の心をつかまえた。とにかく、私が目指すものは、pinterest（www.pinterest.com）です。 背景がゆっくりと移動する、ぼかし効果、浮動モーダル、および底部固定フッター。CSSだけで無限に流れる背景を作るにはどうすればいいですか？

いくつかのオライリーの本では、ぼかし、モーダル、フッターはもう問題ではありません。しかし、私はまだ彼らと一緒に背景を作ることができませんでした。

だから、どのようにしてを水平方向に無限に流れ、背景はCSSとすることができますか？

*条件

ページが応答する（JSなし）、背景画像の高さは、元の画像の比率として、高さのサイズに従う画面に
幅に合わせなければなりません。

ここに私のコードです。

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

 
\t \t \t border: 1px solid red; 
 

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

THX。

出典

2016-06-19 Anonymous

ので、あなたは正しい、それは上下の内側側道を流れるようにしたいですか？ – SML

yeap。そのとおり。 –

これは、あなたがゆっくり応答フィット+流れ+無限に移動合う必要があります高さの背景まで基準。

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>

出典

2016-06-19 06:19:26 SML

いいね。これは私が知りたいことです。ありがとうございました。少し問題があります。アニメーションが再開すると、画像の遅延が確認できます。あなたもそれを解決することはできますか？私が使用しているcuzイメージはパターンではないので、私はそれを本当にスムーズに流れたいと思っています。どうも。 –

キーフレームを変更した場合animatedBackground {to {background-position：100％0; }のような幅に負の値にanimatedBackground {to {background-position：-1800px 0; }これで解決するはずです。私は現時点で私の携帯電話のサイトにアクセスしているので、私はそれをテストするのは少し難しいです、あなた自身を試してみてください。 – SML

スニペットを更新し、それをテストするために実行します – SML

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

出典

2016-06-19 04:27:27 bhansa

これはページ全体を上下に何度も動かします。これは彼が探しているものですか？ –

あなたの答えをありがとう、それは私が欲しい結果と似ていますが、それとは異なっています。 –

ちょっと男、その答えは、実際に@ shichinenのサポートで、私はまた、このトリックをしようとしているとdivタグにこれをしたい。 – Shadow

これを試してみてください。

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

出典

2016-06-19 07:57:15 Shadow

ソリューションは垂直スクロールバーを作成します – SML

CSSだけで無限に流れる背景を作るにはどうすればいいですか？

答えて

関連する問題