签名组件演示
这篇文章展示了如何在博客中使用动态 SVG 签名组件。
功能特点
- ✨ 流畅的手写动画效果
- 🔄 支持循环播放或单次触发
- 🎨 自动适配深色模式
- ⚡ 性能优化，支持无障碍访问
默认循环模式
下面是一个循环播放的签名动画：
进入视口触发模式
滚动到下方，当签名进入视野时会自动播放一次：
使用示例
在 MDX 文件中导入并使用：
```jsx import Signature from ’@/components/Signature.astro’
// 默认循环模式
// 进入视口触发一次
// 自定义样式
```
自定义你的签名
- 使用 Figma、Illustrator 或在线工具创建 SVG
- 确保使用 描边(stroke) 而不是填充
- 将文件保存为 `src/assets/signature.svg`
- 在组件中使用！
文章结尾签名
通常我们会在文章末尾添加签名：
感谢阅读这篇演示文章！如果你觉得这个组件有用，欢迎在自己的博客中使用。
详细使用指南请查看项目根目录的 SIGNATURE_GUIDE.md 文件。