---
title: React 动效组件展示
description: 展示 NovaBlog 中可用的 React 动效 HTML 组件，包括悬浮卡片、打字机效果、翻转卡片、粒子背景和数学公式卡片
pubDate: 2024-01-20
author: NovaBlog
tags: [React, 动效, 组件, 教程]
category: 教程
heroImage: /images/react-components.jpg
---

import AnimatedCard from '../../components/react/AnimatedCard';
import TypewriterText from '../../components/react/TypewriterText';
import FlipCard from '../../components/react/FlipCard';
import ParticleBackground from '../../components/react/ParticleBackground';
import MathFlipCard from '../../components/react/MathFlipCard';

# React 动效组件展示

NovaBlog 支持在 MDX 中直接使用 React 组件，实现丰富的交互动效。本文展示了一些内置的动效组件示例。

## 🎴 悬浮卡片 (AnimatedCard)

鼠标悬停时卡片会浮起并放大，配合阴影效果增强立体感。

<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', gap: '1.5rem', margin: '2rem 0' }}>
  <AnimatedCard 
    title="🚀 快速开发" 
    description="使用 Astro + React 实现极速开发体验"
    color="#3b82f6"
    client:load
  />
  <AnimatedCard 
    title="🎨 精美设计" 
    description="内置多种动效组件，轻松创建炫酷页面"
    color="#10b981"
    client:load
  />
  <AnimatedCard 
    title="⚡ 高性能" 
    description="Islands 架构，按需加载，极致性能"
    color="#f59e0b"
    client:load
  />
</div>

## ⌨️ 打字机效果 (TypewriterText)

模拟打字机的逐字显示效果，支持循环播放。

<div style={{ 
  background: '#1a1a2e', 
  padding: '2rem', 
  borderRadius: '1rem', 
  textAlign: 'center',
  margin: '2rem 0'
}}>
  <TypewriterText 
    text="Hello, NovaBlog! 欢迎来到你的新博客..." 
    speed={80}
    loop={true}
    client:load
  />
</div>

### 使用方式

```tsx
<TypewriterText 
  text="你要显示的文字" 
  speed={100}      // 打字速度（毫秒）
  loop={true}      // 是否循环播放
  client:load
/>
```

## 🔄 翻转卡片 (FlipCard)

点击卡片实现 3D 翻转效果，适合展示正反两面内容。

<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '1.5rem', margin: '2rem 0' }}>
  <FlipCard
    frontTitle="💡 小提示"
    frontDescription="点击翻转查看更多"
    backTitle="✅ 详细说明"
    backDescription="这是一个翻转卡片的背面内容"
    frontColor="#8b5cf6"
    backColor="#06b6d4"
    client:load
  />
  <FlipCard
    frontTitle="🎯 技术栈"
    frontDescription="React + TypeScript"
    backTitle="📦 组件库"
    backDescription="支持自定义样式和动画"
    frontColor="#ec4899"
    backColor="#14b8a6"
    client:load
  />
</div>

### 使用方式

```tsx
<FlipCard
  frontContent={<div>正面内容</div>}
  backContent={<div>背面内容</div>}
  frontColor="#3b82f6"
  backColor="#10b981"
  client:load
/>
```

## ✨ 粒子背景 (ParticleBackground)

基于 Canvas 的粒子动画背景，粒子之间会自动连线，营造科技感。

<ParticleBackground 
  particleCount={60}
  color="#60a5fa"
  speed={0.8}
  client:load
/>

### 自定义内容

<ParticleBackground 
  particleCount={30}
  color="#f472b6"
  speed={1.5}
  client:load
>
  <div style={{ textAlign: 'center' }}>
    <h2 style={{ fontSize: '2.5rem', marginBottom: '1rem' }}>🎉 自定义内容</h2>
    <p>可以在粒子背景上放置任意内容</p>
  </div>
</ParticleBackground>

## 📐 数学公式翻转卡片 (MathFlipCard)

专门用于展示 LaTeX 数学公式的翻转卡片组件。正面显示渲染后的公式，点击"显示 LaTeX"按钮可以查看源码。

### 质能方程

<MathFlipCard latex="E = mc^2" client:load />

### 麦克斯韦方程组

<MathFlipCard latex="\nabla \cdot \mathbf{E} = \frac{\rho}{\varepsilon_0}" client:load />

### 薛定谔方程

<MathFlipCard latex="i\hbar\frac{\partial}{\partial t}\Psi(\mathbf{r},t) = \left[-\frac{\hbar^2}{2m}\nabla^2 + V(\mathbf{r},t)\right]\Psi(\mathbf{r},t)" client:load />

### 傅里叶变换

<MathFlipCard latex="\hat{f}(\xi) = \int_{-\infty}^{\infty} f(x) e^{-2\pi i x \xi} dx" client:load />

### 矩阵运算

<MathFlipCard latex="\begin{pmatrix} a & b \\ c & d \end{pmatrix} \begin{pmatrix} x \\ y \end{pmatrix} = \begin{pmatrix} ax + by \\ cx + dy \end{pmatrix}" client:load />

### 使用方式

```tsx
import MathFlipCard from '../../components/react/MathFlipCard';

<MathFlipCard 
  latex="E = mc^2" 
  displayMode={true}  // 可选，默认为 true
  client:load
/>
```

**属性说明**：
- `latex`：LaTeX 公式字符串
- `displayMode`：是否为块级公式（可选，默认为 true）
- `className`：自定义 CSS 类名（可选）

**特点**：
- 点击"显示 LaTeX"按钮可查看公式源码
- 点击"显示公式"按钮返回渲染结果
- 支持 KaTeX 的所有语法
- 适合教学和技术文档

## 📝 如何在文章中使用

### 1. 导入组件

在文章顶部添加 import 语句：

```mdx
import AnimatedCard from '../../components/react/AnimatedCard';
```

### 2. 使用组件

```mdx
<AnimatedCard 
  title="标题" 
  description="描述"
  color="#3b82f6"
  client:load
/>
```

### 3. client 指令说明

| 指令 | 说明 |
|------|------|
| `client:load` | 页面加载时立即激活组件 |
| `client:visible` | 组件进入视口时激活 |
| `client:idle` | 浏览器空闲时激活 |
| `client:media="(min-width: 768px)"` | 满足媒体查询时激活 |

## 🎨 创建自定义组件

你可以在 `src/components/react/` 目录下创建自己的 React 组件：

```tsx
// src/components/react/MyComponent.tsx
import { useState } from 'react';

interface MyComponentProps {
  title: string;
}

export default function MyComponent({ title }: MyComponentProps) {
  const [count, setCount] = useState(0);
  
  return (
    <div style={{ padding: '1rem', background: '#f3f4f6' }}>
      <h3>{title}</h3>
      <button onClick={() => setCount(count + 1)}>
        点击次数: {count}
      </button>
    </div>
  );
}
```

然后在文章中使用：

```mdx
import MyComponent from '../../components/react/MyComponent';

<MyComponent title="我的组件" client:load />
```

---

## 总结

NovaBlog 提供了灵活的组件系统，让你可以在 Markdown 中嵌入丰富的交互内容。通过 React 组件，你可以实现：

- 🎴 **视觉效果**：悬浮、翻转、渐变等动画
- ⌨️ **动态文字**：打字机、滚动、闪烁效果
- ✨ **背景特效**：粒子、波浪、光效
- 🎮 **交互功能**：计数器、表单、游戏
- 📐 **数学公式**：翻转卡片展示 LaTeX 公式

快去尝试创建属于你自己的动效组件吧！ 🚀