ハードコードされた値を使用せずにレスポンシブ 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 サイトの他の関連記事を参照してください。