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

效果

// App.js

import React from 'react'import styles from './index.m.less'export default functionApp(){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: '020px',
                  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%);}}