CSS3を使用してニューステキストのシームレスな循環スクロールを実現するにはどうすればよいですか? （例）

この記事では主にCSS3を使用してシームレスな接続と連続ループ効果を実現する方法を紹介します。このCSSアニメーションループは画像だけでなくテキストフィールドなどにも適用されます。それらに共通するもの、つまり主なアイデアが何であるかを把握している限り、他のケースについて推論を導くことができます。

1. 具体的な HTML コードの例は次のとおりです:

<div class="list">
    <div class="cc rowup">
        <div class="item">1- 这是一段新闻描述一</div>
        <div class="item">2- 这是一段新闻描述二</div>
        <div class="item">3- 这是一段新闻描述三</div>
        <div class="item">4- 这是一段新闻描述四</div>
        <div class="item">5- 这是一段新闻描述五</div>
        <div class="item">6- 这是一段新闻描述六</div>
        <div class="item">7-这是一段新闻描述七</div>
  <div class="item">8-这是一段新闻描述八</div>
     <div class="item">9- 这是一段新闻描述</div>
        <div class="item">1- 这是一段新闻描述一</div>
        <div class="item">2- 这是一段新闻描述二</div>
        <div class="item">3- 这是一段新闻描述三</div>
        <div class="item">4- 这是一段新闻描述四</div>
        <div class="item">5- 这是一段新闻描述五</div>
        <div class="item">6- 这是一段新闻描述六</div>
        <div class="item">7- 这是一段新闻描述七</div>
        <div class="item">8- 这是一段新闻描述八</div>
     <div class="item">9- 这是一段新闻描述</div>
    </div>
</div>

2. 具体的な CSS コードは次のとおりです:

@keyframes rowup {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    100% {
        -webkit-transform: translate3d(0, -307px, 0);
        transform: translate3d(0, -307px, 0);
    }
}
.list{
    width: 300px;
    border: 1px solid #999;
    margin: 20px auto;
    position: relative;
    height: 200px;
    overflow: hidden;
}
 
.list .rowup{
    -webkit-animation: 10s rowup linear infinite normal;
    animation: 10s rowup linear infinite normal;
    position: relative;
}

上記の CSS ループ アニメーションを実現する主なアイデアは、次のとおりです。上向きのシームレスなループ アニメーション効果を作成したい場合は、A をコピーします。データ B の同一のコピーを元のデータ A の後ろに配置します。上向きスクロール距離 L がちょうど A の高さのときに、setInterval を使用して A の親コンテナを上にスクロールします。 A (L==A.height())、L=0、スクロール再開、無限ループ。

データをコピーして後ろに置くと、Aが上に移動したときに後ろに隙間を埋めるデータができるようになります。 B が表示領域の一番上に移動し、A が表示領域の外に出ると、コンテナは 0 にリセットされます。ユーザーはそれを認識せず、まだ B の最初のデータであると考えます。その後、上にスクロールし続けます。

注:

CSS3 属性を使用して実装したい場合は、アニメーションにする必要があります。トランジションは手動でトリガーする必要があり、無限に実行することはできないためです。アニメーションはこの問題を解決できます。

この記事はCSSアニメーションループの導入に関するものです。困っている友人に役立つことを願っています。

以上がCSS3を使用してニューステキストのシームレスな循環スクロールを実現するにはどうすればよいですか? （例）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。