无限滚动动画 React

            
            <!-- 引入 react 18.2 -->
<script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-y/react/17.0.2/umd/react.production.min.js" type="application/javascript"></script>
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-y/react-dom/17.0.2/umd/react-dom.production.min.js" type="application/javascript"></script>
<!-- 引入 babel 支持 jsx -->
<script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-y/babel-standalone/6.26.0/babel.min.js"></script>

<!-- jsx 语法使用 type="text/babel" -->
<script type="text/babel">


const COLORS = ['#bbf7d0', '#99f6e4', '#bfdbfe', '#ddd6fe', '#f5d0fe', '#fed7aa', '#fee2e2'];
const TAGS = ['HTML', 'CSS', 'JavaScript', 'Typescript', 'Tailwind', 'React', 'Next.js', 'Gatsby', 'UI/UX', 'SVG', 'animation', 'webdev'];
const DURATION = 15000;
const ROWS = 5;
const TAGS_PER_ROW = 5;

const random = (min, max) => Math.floor(Math.random() * (max - min)) + min;
const shuffle = (arr) => [...arr].sort( () => .5 - Math.random() );

const InfiniteLoopSlider = ({children, duration, reverse = false}) => {
  return (
    <div className='loop-slider' style={{
        '--duration': `${duration}ms`,
        '--direction': reverse ? 'reverse' : 'normal'
      }}>
      <div className='inner'>
        {children}
        {children}
      </div>
    </div>
  );
};

const Tag = ({ text }) => (
  <div className='tag'><span>#</span> {text}</div>
);

const App = () => (
  <div className='app'>
    <header>
      <h1>无限滚动动画</h1>
      <p>纯CSS实现，双向绑定，内容独立，方便自定义</p>
    </header>
    <div className='tag-list'>
      {[...new Array(ROWS)].map((_, i) => (
        <InfiniteLoopSlider key={i} duration={random(DURATION - 5000, DURATION + 5000)} reverse={i % 2}>
          {shuffle(TAGS).slice(0, TAGS_PER_ROW).map(tag => (
            <Tag text={tag} key={tag}/>
          ))}
        </InfiniteLoopSlider>
      ))}
      <div className='fade'/>
    </div>
  </div>
);

ReactDOM.render(
  <App/>,
  document.body
);
</script>