纯css实现 横向跑马灯（无缝滚动轮播，移入悬停）

效果

// 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%);
  }
}