CSS を使用してシームレスなスクロールテキストカルーセル効果を作成する方法-CSSチュートリアル-php.cn

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

WBOY

リリース： 2023-10-25 10:24:33

オリジナル

1849 人が閲覧しました

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

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

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

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

overflow: hidden: この属性は、要素のオーバーフローコンテンツを表示するかどうかを制御するために使用されます。要素の範囲を超えるコンテンツは非表示になります。
white-space: nowrap: この属性は、要素内のテキストの折り返し方法を制御するために使用されます。nowrap に設定すると、テキストは常に 1 行で表示されます。
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 サイトの他の関連記事を参照してください。