212 lines
5.1 KiB
Plaintext
212 lines
5.1 KiB
Plaintext
---
|
|
title: React 动效组件展示
|
|
description: 展示 NovaBlog 中可用的 React 动效 HTML 组件，包括悬浮卡片、打字机效果、翻转卡片和粒子背景
|
|
pubDate: 2024-01-20
|
|
author: NovaBlog
|
|
tags: [React, 动效, 组件, 教程]
|
|
category: 教程
|
|
heroImage: '/images/hello-world.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';
|
|
|
|
# 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>
|
|
|
|
## 📝 如何在文章中使用
|
|
|
|
### 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 组件，你可以实现：
|
|
|
|
- 🎴 **视觉效果**：悬浮、翻转、渐变等动画
|
|
- ⌨️ **动态文字**：打字机、滚动、闪烁效果
|
|
- ✨ **背景特效**：粒子、波浪、光效
|
|
- 🎮 **交互功能**：计数器、表单、游戏
|
|
|
|
快去尝试创建属于你自己的动效组件吧！ 🚀 |