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

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

WBOY

リリース： 2023-10-24 12:13:48

オリジナル

1534 人が閲覧しました

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

シームレスなスクロールテキスト通知バーは、Web ページでは一般的な効果であり、次の方法で実現できます。満たすCSS。この記事では、CSS を使用してシームレスなスクロールテキスト通知バーを作成する方法を紹介し、具体的なコード例を示します。

シームレスなスクロールテキスト通知バー効果を実現するには、まずテキストを囲むコンテナーが必要で、コンテナーの幅、高さ、背景色を設定します。たとえば、以下に示すように、div 要素を使用してクラス名を付けることができます。

<div class="scrolling-text-container">
    文字通知栏内容
</div>

ログイン後にコピー

次に、テキスト通知バーの外観と動作を制御する CSS スタイルを定義する必要があります。まず、以下に示すように、コンテナに基本的なスタイルを追加します。

.scrolling-text-container {
    width: 100%;
    height: 30px;
    background-color: #f1f1f1;
    overflow: hidden;
    white-space: nowrap;
}

ログイン後にコピー

上記のコードは、コンテナの幅を 100%、高さを 30 ピクセルにし、背景色をグレーに設定します。同時に、オーバーフロー属性を「非表示」に設定してテキスト通知バーの外側のコンテンツを非表示にし、コンテナーの表示部分のみが表示されるようにします。

次に、以下に示すように、テキスト通知バーのコンテンツをspan要素でラップし、それに主要なスタイル属性を設定する必要があります。

<div class="scrolling-text-container">
    <span class="scrolling-text">文字通知栏内容</span>
</div>

ログイン後にコピー

.scrolling-text {
    position: relative;
    display: inline-block;
    animation: scroll-left 10s linear infinite;
}

ログイン後にコピー

上記のコードでは、Aクラス名がspan要素に設定され、必要なスタイル属性が定義されます。このうち、スクロールアニメーション中の相対位置を維持するために、position属性を「relative」に設定します。また、span 要素が 1 行で表示され、コンテナーの幅が変更されないように、表示属性を「inline-block」に設定します。

また、テキストを右から左に徐々にスクロールさせる「scroll-left」というアニメーションも定義しました。このアニメーションはリニアアニメーション効果を使用し、持続時間を 10 秒に設定します。無限ループを実現するには、animation-iteration-count プロパティを「infinite」に設定します。具体的なアニメーションコードは次のとおりです。

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

ログイン後にコピー

上記のコードの @keyframes ルールは、左スクロールアニメーションの 2 つのキーフレームを定義します。 0% では、テキストの位置を元の位置、つまりオフセットなしで設定します。 100% では、テキストの位置を左に 100% オフセットします。これにより、テキストはコンテナの左側で完全に消え、右側から再び表示されます。

最後に、Web ページのデザインとレイアウトによりよく適合させるために、テキスト通知バーにいくつかのスタイルを追加する必要があります。ニーズに応じて調整できます。たとえば、文字の色、フォント、サイズなどを設定したり、文字の余白や間隔などを設定したりできます。以下は、テキスト通知バーのスタイルをカスタマイズするためのサンプルコードスニペットです。

.scrolling-text {
    ...
    color: #333;
    font-family: Arial, sans-serif;
    font-size: 16px;
    padding: 5px;
    margin: 0;
    letter-spacing: 1px;
}

ログイン後にコピー

上記のコードスニペットは、テキスト通知バーのフォントの色を黒に設定し、フォントファミリは Arial とサンセリフです。バックアップフォント。サイズは 16 ピクセル、余白は 5 ピクセル、間隔は 1 ピクセルに設定されます。

上記の HTML および CSS コードの例を使用すると、シームレスなスクロールテキスト通知バー効果を簡単に実現できます。ニーズに応じて対応するスタイルを作成するだけです。このように、CSS を使用して動的で魅力的なテキスト通知バーを Web ページに実装し、ユーザーの注意を引き、重要な情報を提供することができます。

この記事が、シームレスなスクロールテキスト通知バーを作成するための CSS の効果を理解するのに役立つことを願っています。 CSS を使用して素晴らしいテキスト通知バーを作成できることを願っています。

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