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