[CSS]背景画像をアニメーションすることで簡単に作れる無限ループスライドショー

最近のスタートアップ企業のウェブサイトでよく見かける、企業ロゴがぐるぐる回っている無限ループスライドショー。

CSSの背景画像とCSSアニメーションを用いることでJSで実装すること無く実現できる。

要は背景画像の位置を徐々にずらしていくだけ。

結構色々なところで使えそうである。

デモに使用している背景画像 1518px × 160px

デモに使用する背景画像

HTML

CSS

Run Result

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください