要制作无限循环的文字动画效果，可以使用 CSS 中的 @keyframes 规则和 animation 属性。具体步骤如下：
@keyframes move {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}.element {
animation: move 2s ease-in-out infinite;
}其中，move 是动画名称，2s 是动画持续时间，ease-in-out 是动画缓动函数，infinite 表示动画无限循环。
.element {
position: relative;
overflow: hidden;
}
.element::before {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
animation: move 2s ease-in-out infinite;
white-space: nowrap;
}
.element::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 100%;
right: -100%;
bottom: 0;
animation: move 2s ease-in-out infinite;
white-space: nowrap;
}其中，data-text 是在 HTML 中通过 data-* 属性设置的文字内容。使用 ::before 和 ::after 伪元素来分别显示两份文字内容，并将 ::after 元素的 left 属性设置为 100%，使其出现在 ::before 元素的右侧，并且在动画过程中向左移动，形成循环效果。
关键词：