簡単なイメージスライダの作成方法

Question

私が与えることができる最良の例は、このサブディレクトリのヘッダです。 https://www.reddit.com/r/Frat/この正確な効果を作りたいと思います。私のグーグルすべてが、同じ場所の同じ画像を置き換える画像スライダーやスライドショーにつながります。私は、サンプルサイトに示すように、画像を繰り返しスライドさせる方法を見つけることができません。

Answer 1

要素を検査すると、以下が表示されます。したがって、非常に長いPNG画像を作成し、スクロールするために「アニメーション」を設定しました。

#header { 
background: url(//b.thumbs.redditmedia.com/mcxWBBMc21iKf16f9Zl8mzB--6d7_KL19LjnNbwfP6Q.png); 
animation: scroll 200s linear infinite; 

Answer 2

アニメーション（この場合の遷移）の中間ステップを制御することができますので、あなたが@keyframeルールを作成する必要が同じ効果を作成するために、私はあなたに例を作った：https://codepen.io/jdplee/pen/GMRNVr

することができます次のような手順を実行するためのルールを追加してください。

@keyframes scroll { 
    0% { background-position: 0 0; } 
    30% { //CSS } 
    68%, 72% { //CSS } 
    100% { background-position: -1920px 0; } 
}