ホームページ >ウェブフロントエンド >CSSチュートリアル >ハードコードされた値を使用せずにレスポンシブ CSS3 マーキー効果を作成するにはどうすればよいですか?
CSS3 のマーキー効果: テキスト適応のための特定の値の回避
CSS3 アニメーションでは、多くの場合、テキストが表示されるマーキー効果を作成することが望ましいです。画面をスクロールします。ただし、「margin-left: -4200px;」などの特定の値を使用すると、テキストのインデントは、さまざまなテキストの長さに対して制限される可能性があります。
この問題を回避する 1 つの方法は、テキストを span 要素で囲み、代わりに「padding-left」プロパティを使用することです。
.marquee span { display: inline-block; width: max-content; padding-left: 100%; /* show the marquee just outside the paragraph */ animation: marquee 15s linear infinite; } @keyframes marquee { 0% { transform: translate(0, 0); } 100% { transform: translate(-100%, 0); } }
これにより、アニメーションがテキストの幅に適応し、画面全体を完全にスクロールできるようになります。さらに、「ホバー」状態を使用して、ユーザーがテキストの上にマウスを移動したときにアニメーションを一時停止できます。
.marquee span:hover { animation-play-state: paused; }
最後に、ユーザーの好みを尊重するために、このコードは「prefers-reduced-motion」メディアを実装します。クエリ。これにより、アニメーションの速度が低下するか、動きを少なくしたいユーザーのためにアニメーションが完全に無効になります。
以上がハードコードされた値を使用せずにレスポンシブ CSS3 マーキー効果を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。