Author: | wheatup |
---|---|
Views Total: | 652 views |
Official Page: | Go to website |
Last Update: | March 1, 2023 |
License: | MIT |
Preview:

Description:
The Pure CSS Marquee uses CSS3 transforms and container queries to create a responsive and elegant scrolling effect for text that exceeds the width of its container. Supports for scrolling in both left and right directions.
How to use it:
1. Add your text to the marquee container.
<div class="marquee"> <span>The Pure CSS Marquee uses CSS3 transforms and container queries to create a responsive and elegant scrolling effect for text that exceeds the width of its container.<span> </div>
2. The CSS styles for the marquee container.
.marquee { display: flex; position: relative; overflow: hidden; white-space: nowrap; width: 300px; padding: 20px 10px; margin: 20px auto; background-color: salmon; resize: horizontal; container-type: inline-size; }
3. Apply a marquee style scrolling animation to the text.
.marquee > * { -webkit-animation: marquee 10s linear infinite both alternate; animation: marquee 10s linear infinite both alternate; } @-webkit-keyframes marquee { to { transform: translateX(min(100cqw - 100%, 0px)); } } @keyframes marquee { to { transform: translateX(min(100cqw - 100%, 0px)); } }