cssだけで背景画像を右から左へループさせる　

24.09.20

htmlの入力例

contentが中身です。こちらは必要に応じて適宜整えてください。

<div class="jp_slide_img_wrapper">
    <div class="content">
        <h2 class="h2_title">中身です。</h2>
    </div>
</div>

</div>

cssの入力

大枠のclass（jp_slide_img_wrapper）に以下のコードを入れると作動します。それとは別に@keyframesのコードが必要なので
最終的には「外枠背景のコード」と「@keyframesのコード」の2つがあれば作動します。

「外枠背景」と「@keyframes」のcss

.jp_slide_img_wrapper {
    position: relative;
    width: 100%;
    background-image: url("images/bg-cover.png");
    background-repeat: repeat-x;
    background-size: cover;
    background-position: 0 0;
    animation-name: slide_img;
    animation-duration: 200s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;

}

@keyframes slide_img {
    100% {
        background-position: -10000px 0;
        }
}

.jp_slide_img_wrapper {

position: relative;

width: 100%;

background-image: url("images/bg-cover.png");

background-repeat: repeat-x;

background-size: cover;

background-position: 0 0;

animation-name: slide_img;

animation-duration: 200s;

animation-iteration-count: infinite;

animation-timing-function: linear;

}

@keyframes slide_img {

100% {

background-position: -10000px 0;

}

詳細はこちら！

お役に立てましたらadsenseクリックお願いします！

いかがでしたでしょうか？もしお役に立てましたら、お賽銭のつもりでadsenseをポチっとクリックお願いします！↓上手くいきますようにお祈りしておきます！

« js「ページトップへ戻る」が少し下へスクロールするとふわっと出るコード。

All-in-One WP Migration 容量の上げ方２G »

cssだけで背景画像を右から左へループさせる

htmlの入力例

cssの入力

「外枠背景」と「@keyframes」のcss

お役に立てましたらadsenseクリックお願いします！

関連記事

cssだけで背景画像を右から左へループさせる　