基于 CSS3 Animation 使用 React 构建的弹幕组件。[演示地址](http://zerosoul.github.io/rc-bullets)，支持功能： - 管理弹幕：暂停、隐藏、清屏等 - 设置弹幕：速度、循环次数、延迟播放、自定义动画类型等 ```javascript import React, { useEffect, useState } from 'react'; import BulletScreen, { StyledBullet } from 'rc-bullets'; const headUrl='https://zerosoul.github.io/rc-bullets/assets/img/heads/girl.jpg'; export default function Demo() { // 弹幕屏幕 const [screen, setScreen] = useState(null); // 弹幕内容 const [bullet, setBullet] = useState(''); useEffect(() => { // 给页面中某个元素初始化弹幕屏幕，一般为一个大区块 let s = new BulletScreen('.screen'); // or // let s=new BulletScreen(document.querySelector('.screen)); setScreen(s); }, []); // 弹幕内容输入事件处理 const handleChange = ({ target: { value } }) => { setBullet(value); }; // 发送弹幕 const handleSend = () => { if (bullet) { // push 纯文本 screen.push(bullet); // or 使用 StyledBullet screen.push( <StyledBullet head={headUrl} msg={bullet} /> ); // or 还可以这样使用，效果等同使用 StyledBullet 组件 screen.push({msg:bullet,head:headUrl,color:"#eee" bgColor:"rgba(2,2,2,.3)"}) } }; return ( <main> <div className="screen" style={{ width: '100vw', height: '80vh' }}></div> <input value={bullet} onChange={handleChange} /> <button onClick={handleSend}>发送</button> </main> ); } ```