CSS を使用してマーキー効果を作成する方法

CSS を使用してマーキー効果を実装する方法の手順

マーキー効果は、Web 上で継続的にスクロールするテキストや画像を表示する一般的なフロントエンド特殊効果です。ページに動きとエネルギーを加えます。この記事では、CSS を使用してマーキー効果を実現する具体的な手順を紹介し、参考として対応するコード例を示します。

ステップ 1: HTML 構造の作成

まず、マーキー効果を実現するために HTML でコンテナを作成する必要があります。以下に示すように、div 要素をコンテナとして使用できます。

 
 
跑马灯内容1
 
跑马灯内容2
 
跑马灯内容3
  
 

上記のコードでは、マーキーのコンテナとしてクラス「marquee-container」を持つ div 要素を作成し、その中に作成しました。コンテナ クラス「marquee-content」を持つ ul 要素は、マーキーのコンテンツを収容するために使用されます。

ステップ 2: CSS スタイルを設定する

次に、コンテナとコンテンツに対応する CSS スタイルを設定する必要があります。具体的な手順は次のとおりです。

1. コンテナの幅と高さを設定し、相対配置 (位置:相対) に設定して、コンテナ内にマーキー コンテンツを配置します。

.marquee-container { width: 100%; height: 100px; position: relative; }

2. コンテンツのスタイルとスクロール効果を設定します。コンテンツの ul 要素を絶対配置 (position:Absolute) に設定し、その幅をより大きな値に設定して、コンテンツが水平方向にスクロールできるようにします。

.marquee-content { list-style: none; margin: 0; padding: 0; position: absolute; white-space: nowrap; /* 防止内容换行 */ animation: marquee 10s linear infinite; /* 设置滚动效果 */ } @keyframes marquee { 0% { transform: translateX(0%); } /* 初始状态，内容从左侧显示 */ 100% { transform: translateX(-100%); } /* 结束状态，内容向左滚动完全消失 */ }

上記のコードでは、「marquee」という名前の @keyframes アニメーションを設定し、transform 属性のtranslateX 関数を通じてコンテンツの水平スクロールを実現します。初期状態 0% を水平オフセット 0% に設定し、終了状態 100% を水平オフセット -100% に設定し (つまり、コンテンツが完全に消えるまで左にスクロールします)、アニメーションを 10 秒間継続するように設定します。モーションと無限ループ。

ステップ 3: コンテナーとコンテンツの表示効果を調整する

最後に、実際のニーズに応じてコンテナーとコンテンツの表示効果を調整できます。たとえば、ページ全体のスタイルに合わせてコンテナの背景色、境界線、余白などを設定できます。同時に、コンテンツのフォント、色、フォント サイズなどを設定し、CSS トランジション効果を追加してマーキーの滑らかさを高めることもできます。

.marquee-container { background-color: #f2f2f2; border: 1px solid #ccc; margin: 20px; } .marquee-content li { font-family: Arial, sans-serif; color: #333; font-size: 16px; padding: 10px; transition: color 0.3s ease-in-out; } .marquee-content li:hover { color: #ff0000; /* 鼠标悬停时改变文字颜色 */ }

上記のコードでは、コンテナの背景色を #f2f2f2 に設定し、境界線を 1px の実線 #ccc に設定し、マージンを 20px に設定します。同時に、コンテンツのフォントを Arial、色を #333、フォント サイズを 16px に設定し、コンテンツに 0.3 秒間のカラートランジション効果を設定します。これにより、コンテンツのテキストの色が徐々に赤に変わります。マウスがホバーされています。

要約すると、上記の手順により、CSS を使用して単純なマーキー効果を実現できます。もちろん、実際のニーズに応じて、この効果をさらに拡大し、最適化することができます。上記の内容がお役に立てば幸いです。

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