Бесконечный шатер с градиентным текстом ⇐ CSS

[Anonymous]

Мне нужно сделать бесконечную бегущую линию с градиентным текстом, которая меняется по мере его движения, как в примере, она работает, но в Safari возникают проблемы, все там дергается, и буквы, кажется, сталкиваются друг с другом, возможно, что -то можно сделать, чтобы оно также работало в сафари без замораживания. Может быть, есть и другие решения для такой реализации. < /P>
Пример marquee < /p>

Код: Выделить всё

document.querySelectorAll('.running-lines__wrapper').forEach(
(line) => {
const content = line.innerHTML;
const duplicateCount = line.getAttribute('data-duplicate-count') || 1;
const duration =
parseInt(line.getAttribute('data-duration'), 10) || 10000;
const direction = line.getAttribute('data-direction') || 'normal';
let duplicatedContent = '';

for (let i = 0; i < duplicateCount; i++) {
duplicatedContent += content;
}

line.innerHTML = duplicatedContent;

const lineText = line.querySelectorAll('.running-lines__items');

lineText.forEach((text) => {
const fromFrame = {
textIndent: 0
};
const toFrame = {
textIndent: '-100%'
};
const options = {
duration,
iterations: Infinity,
direction
};
text.animate([fromFrame, toFrame], options);
});
});< /code>
.running-lines {
font-family: "Poppins";
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
row-gap: 0.5rem;
overflow: hidden;
background-image: linear-gradient(92.55deg,
#852fff 0%,
#dd26ed 48.5%,
#ed2662 100%);
-webkit-background-clip: text;
background-clip: text;
padding-top: 4rem;
padding-bottom: 4rem;
mix-blend-mode: lighten;
}

@media (min-width: 956px) {
.running-lines {
row-gap: 1rem;
padding-top: 3.5rem;
padding-bottom: 3.5rem;
}
}

@media (min-width: 1184px) {
.running-lines {
row-gap: 1.25rem;
}
}

.running-lines__wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding-top: 0.625rem;
padding-bottom: 0.625rem;
}

.running-lines__items {
margin-bottom: 0;
text-wrap: nowrap;
will-change: text-indent;
/*   animation: marquee 15s linear infinite; */
}

.running-lines__item {
margin-right: 2rem;
font-size: 1.25rem;
line-height: 1.5rem;
font-style: italic;
color: transparent;
}

@media (min-width: 956px) {
.running-lines__item {
margin-right: 3rem;
font-size: 1.5rem;
line-height: 2rem;
}
}

@media (min-width: 1184px) {
.running-lines__item {
margin-right: 4rem;
}
}

@keyframes marquee {
from {
text-indent: 0;
}

to {
text-indent: -100%;
}
}< /code>



Security Kit
Honeypot
Antibot
Flood Control
Move 403 to 404
Rabbit Hole
Username Enumeration Prevention

Content Moderation
Workflows
Simple Menu Permissions
Group Node
Scheduler
Media

Paragraphs &  Paragraphs Browser
Group
Gin & Gin Toolbar
Crop & Image Widget Crop
Migrate & Migrate Plus

Подробнее здесь: https://stackoverflow.com/questions/795 ... dient-text