How Can I Create a Responsive CSS3 Marquee Effect Without Hardcoded Values?

Marquee Effect in CSS3: Avoiding Specific Values for Text Adaptation

In CSS3 animation, it's often desirable to create a marquee effect, where text scrolls across the screen. However, using specific values such as "margin-left: -4200px;" for text indentation can be restrictive for varying text lengths.

One approach to avoid this issue is to wrap the text in a span element and employ the "padding-left" property instead:

.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); }
}

This allows the animation to adapt to the width of the text, ensuring that it scrolls fully across the screen. Additionally, the "hover" state can be used to pause the animation when the user hovers over the text:

.marquee span:hover {
  animation-play-state: paused;
}

Finally, to respect user preferences, this code implements the "prefers-reduced-motion" media query, which reduces the animation speed or disables it entirely for users who may prefer less movement.

The above is the detailed content of How Can I Create a Responsive CSS3 Marquee Effect Without Hardcoded Values?. For more information, please follow other related articles on the PHP Chinese website!