效果
// App.js
import React from 'react'import styles from './index.m.less'export default function App() { return ( <div className={styles.container} style={{ display: 'flex' }}> {[1, 2, 3].map((k) => ( <div key={k} className={styles.content} style={{ display: 'flex', margin: '50px 0' }}> {Array.from({ length: 12 }, (_, idx) => idx).map((i) => { return ( <a key={i} href='https://www.baidu.com/' style={{ margin: '0 20px', padding: '20px 0', width: '220px', height: '100px', textAlign: 'center', border: '1px solid #f00' }} > <div style={{ fontSize: '80px' }}>{i + 1}</div> </a> ) })} </div> ))} </div> )}// index.m.less
.content { animation: marquee-left 20s linear infinite !important;}// 层级必须要这样写.container{ &:hover{ .content{ // 暂停动画 animation-play-state: paused !important; } }}@keyframes marquee-left { 0% { transform: translate(0); } 100% { transform: translate(-100%); }}