純粋な CSS を通じてシームレスなスクロール ニュースを実現するための方法とテクニック

純粋な CSS を通じてシームレスなスクロール ニュースを実現する方法とテクニック

Web テクノロジーの継続的な発展に伴い、CSS を通じてクールな効果を実現する方法が重要になってきました。フロントエンド開発者の追求。この記事では、純粋な CSS を使用してシームレスなスクロール ニュースを実現する方法とテクニックを紹介し、具体的なコード例を示します。

1. 実装アイデア
シームレスなスクロールニュース効果を実現するには、CSS アニメーションを使用する方法と CSS3 のtransform 属性を使用する方法の 2 つのアイデアが一般的です。以下では、これら 2 つの方法を 1 つずつ紹介します。

1. CSS アニメーションを使用する
CSS アニメーションは、キー フレーム (@keyframes) を通じてアニメーション効果を定義し、アニメーション属性を通じて要素にアニメーションを適用します。シームレスなスクロール ニュースを実現する鍵は、アニメーションの無限ループを通じてシームレスなスクロールの効果を実現することです。

具体的な実装手順は次のとおりです。
(1) div コンテナを作成し、その幅をスクロール コンテンツの幅に設定します。
(2) スクロールコンテンツをコンテナに挿入し、インライン要素として設定します。
(3) CSS アニメーションを使用してスクロール効果を実現し、アニメーションの継続時間とタイミング関数プロパティを設定することでスクロール速度と効果を制御します。
(4) アニメーションの無限属性を設定して、アニメーションを無限ループさせます。

サンプル コードは次のとおりです:

<div class="news-container">
  <ul class="news">
    <li>新闻1</li>
    <li>新闻2</li>
    <li>新闻3</li>
    <li>新闻4</li>
    <li>新闻5</li>
    <!-- 添加更多新闻 -->
  </ul>
</div>

.news-container {
  width: 400px;
  overflow: hidden;
}

.news {
  list-style: none;
  padding: 0;
  margin: 0;
  white-space: nowrap;
  animation: scroll-news 10s linear infinite;
}

.news li {
  display: inline;
  margin-right: 20px;
}

@keyframes scroll-news {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

上記のコードでは、ニュース コンテンツはキーフレーム アニメーションのスクロール ニュースによって左に翻訳されます。translateX(-100%) は翻訳することを意味します要素を左側に配置します。要素自体の幅の 100 パーセントで、スクロール効果を実現します。

2. CSS3 の Transform プロパティを使用する
CSS3 の Transform プロパティは、要素を回転、拡大縮小、平行移動、および面取りすることができるメソッドです。ニュースのシームレスなスクロールを実装する場合、Transform 属性で TranslateX を使用して要素を翻訳できます。

具体的な実装手順は次のとおりです。
(1) div コンテナを作成し、その幅をスクロール コンテンツの幅に設定します。
(2) スクロールコンテンツをコンテナに挿入し、インラインブロック要素として設定します。
(3) Transform 属性を設定してスクロール効果を実現し、トランジションの easy-in-out 属性を設定してスクロール速度と効果を制御します。

サンプル コードは次のとおりです。

<div class="news-container">
  <ul class="news">
    <li>新闻1</li>
    <li>新闻2</li>
    <li>新闻3</li>
    <li>新闻4</li>
    <li>新闻5</li>
    <!-- 添加更多新闻 -->
  </ul>
</div>

.news-container {
  width: 400px;
  overflow: hidden;
}

.news {
  list-style: none;
  padding: 0;
  margin: 0;
  white-space: nowrap;
  animation: scroll-news 10s linear infinite;
}

.news li {
  display: inline-block;
  margin-right: 20px;
  transition: transform 1s ease-in-out;
}

.news li:hover {
  transform: translateX(-100%);
}

上記のコードでは、:hover 疑似クラス セレクターと Transform プロパティを設定することにより、ニュース リスト上にマウスを置くと、要素がスクロール効果を実現するために、幅の 100% が自動的に左に変換されます。

2. 注意事項
シームレスなスクロールニュース効果を実現する過程で、注意する必要のある注意事項がいくつかあります:

1. コンテナの幅を確認するスクロールするコンテンツを収容するには十分です。
2. コンテナのスコープ外のコンテンツを非表示にするには、コンテナのオーバーフロー属性を非表示に設定します。
3. 水平方向の配置効果を実現するには、スクロール コンテンツをインラインまたはインライン ブロック要素に設定します。
4. スクロールするコンテンツ間の間隔を維持するには、ニュース項目間の余白を設定します。
5. アニメーションや Transform プロパティを使用してスクロール効果を実現し、無限ループを設定します。

上記の方法とテクニックにより、純粋な CSS を通じてシームレスにスクロールするニュースの効果を簡単に実現できます。この記事がお役に立てば幸いです。CSS についてさらに詳しく知りたい場合は、他の CSS の素晴らしい効果を引き続き探索してください。

以上が純粋な CSS を通じてシームレスなスクロール ニュースを実現するための方法とテクニックの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。