CSS を使用してシームレスなスクロール テキスト カルーセル効果を作成する方法

CSS を使用してシームレスなスクロール テキスト カルーセル効果を作成する方法には、特定のコード例が必要です。

インターネットの発展と、ユーザー エクスペリエンス、改善に対するデザイナーの要件に伴い、 Web サイト上のテキスト カルーセル効果は、一般的な表示形式の 1 つになりました。テキスト カルーセルはユーザーの注意を引き付け、ページのダイナミクスと活力を高め、コンテンツに対するユーザーの注意を高めることができます。この記事では、CSS を使用してシームレスなスクロール テキスト カルーセル効果を作成する方法と、具体的なコード例を紹介します。

シームレスなスクロール テキスト カルーセル効果を作成する前に、まず基本的な CSS プロパティとテクニックを理解する必要があります。テキスト カルーセル効果は主に CSS アニメーションとトランジション プロパティに依存します。その中で、次の主要な CSS 属性を使用する必要があります:

1. overflow: hidden: この属性は、要素のオーバーフロー コンテンツを表示するかどうかを制御するために使用されます。要素の範囲を超えるコンテンツは非表示になります。
2. white-space: nowrap: この属性は、要素内のテキストの折り返し方法を制御するために使用されます。nowrap に設定すると、テキストは常に 1 行で表示されます。
3. animation: この属性はアニメーション効果のキーフレームを指定するために使用されます。キーフレームを使用してテキストのスクロール効果を実現します。

以下は、基本的なシームレス スクロール テキスト カルーセル コードの例です。

/* HTML结构 */
<div class="slider">
    <ul class="slide-list">
        <li class="slide-item">Text 1</li>
        <li class="slide-item">Text 2</li>
        <li class="slide-item">Text 3</li>
        <li class="slide-item">Text 4</li>
    </ul>
</div>

/* CSS样式 */
.slider {
    width: 300px;
    height: 100px;
    overflow: hidden;
}

.slide-list {
    position: relative;
    list-style: none;
    padding: 0;
    margin: 0;
    animation: slide 10s infinite linear;
}

.slide-item {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    white-space: nowrap;
    animation: fade 10s infinite;
}

@keyframes fade {
    0% {
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes slide {
    0% {
        transform: translateY(0);
    }
    20% {
        transform: translateY(0);
    }
    30% {
        transform: translateY(-100%);
    }
    80% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(0);
    }
}

上記のコードでは、2 つのキー フレームを使用してテキスト カルーセル効果を実現しています。 @keyframes を通じて 2 つのキー フレーム fade と slide を定義し、これら 2 つのキー フレームを関連する要素に適用して、適切な継続時間とアニメーション効果を設定します。 translationY 属性の値を調整することで、要素は垂直方向にシームレスなスクロールを実現します。同時に、異なる opacity 値を設定することで、テキストのフェードインおよびフェードアウト効果が実現され、トランジションの滑らかさが向上します。

このコードを使用する場合、特定のニーズに応じて調整できます。たとえば、テキストの内容や量を変更したり、テキストのスクロールの速度や方向を調整したり、スタイルを追加して視覚効果を高めることもできます。このコードの中心的なアイデアは、実際の状況に応じてカスタマイズおよび最適化できる CSS アニメーションとトランジション プロパティを通じてテキスト カルーセル効果を実現することです。

要約すると、シームレスなスクロール テキスト カルーセルを作成するには、CSS アニメーションとトランジション プロパティを使用し、テキスト スクロールとグラデーション効果を実現するキー フレームの定義と組み合わせが必要です。同時に、2 つの属性 overflow:hidden と white-space:nowrap を使用して、テキストの表示と行の折り返しを制御します。これらのプロパティの値とアニメーション効果の設定を調整することで、さまざまなタイプとスタイルのテキスト カルーセル効果を実現できます。この記事のコード例が皆様のお役に立てれば幸いです。このテキスト カルーセル効果を実際に継続的に最適化および開発してみてください。

以上がCSS を使用してシームレスなスクロール テキスト カルーセル効果を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。