当前位置：首页 > React

react实现文字闪烁

2026-01-26 17:12:13React

实现文字闪烁的方法

在React中实现文字闪烁效果可以通过CSS动画或JavaScript定时器控制样式变化。以下是两种常见实现方式：

使用CSS动画实现

通过@keyframes定义闪烁动画，并应用到文本元素上：

import React from 'react';
import './BlinkingText.css';

function BlinkingText() {
  return <div className="blinking-text">闪烁的文字</div>;
}

对应的CSS文件（BlinkingText.css）：

.blinking-text {
  animation: blink 1s infinite;
}

@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}

使用React状态控制

通过useState和useEffect实现动态控制：

import React, { useState, useEffect } from 'react';

function BlinkingText() {
  const [visible, setVisible] = useState(true);

  useEffect(() => {
    const interval = setInterval(() => {
      setVisible(v => !v);
    }, 500); // 控制闪烁速度
    return () => clearInterval(interval);
  }, []);

  return <div style={{ opacity: visible ? 1 : 0 }}>闪烁的文字</div>;
}

自定义闪烁样式

可以扩展基础实现来满足不同需求：

// 彩色闪烁效果
.blinking-color {
  animation: colorBlink 2s infinite;
}

@keyframes colorBlink {
  0% { color: red; }
  33% { color: green; }
  66% { color: blue; }
  100% { color: red; }
}

组件化实现

创建可复用的闪烁组件：

react实现文字闪烁

function Blink({ children, speed = 500 }) {
  const [show, setShow] = useState(true);

  useEffect(() => {
    const interval = setInterval(() => {
      setShow(s => !s);
    }, speed);
    return () => clearInterval(interval);
  }, [speed]);

  return show ? <span>{children}</span> : null;
}

// 使用方式
<Blink speed={300}>自定义速度闪烁</Blink>

这些方法可以根据实际需求调整闪烁频率、颜色变化或其他视觉效果。CSS动画方案性能更优，而JavaScript方案提供更灵活的控制逻辑。