微交互效果演示

本文档展示博客支持的各种微交互效果。

1. 链接下划线动画 - 从中心展开

使用 .link-hover-center 类：

悬停查看效果 - 下划线从中心展开

2. 磁性按钮效果

使用 .magnetic-btn 类（鼠标靠近时会被轻微吸引）：

磁性按钮

3. 3D 卡片倾斜效果

使用 .card-3d 类：

4. 文字渐变流光动画

使用 .gradient-text-animated 类：

流光文字动画效果

5. 按钮点击波纹效果

使用 .btn-ripple 类：

6. 图片悬停缩放

使用 .img-zoom 类：

7. 呼吸边框效果

使用 .breathing-border 类：

使用说明

要在你的文章中使用这些效果，只需添加对应的 CSS 类名：

<!-- 链接下划线 -->
<a href="#" class="link-hover-center">链接文字</a>

<!-- 磁性按钮 -->
<button class="magnetic-btn btn">按钮</button>

<!-- 3D 卡片 -->
<div class="card-3d card-base">...</div>

<!-- 流光文字 -->
<span class="gradient-text-animated">文字</span>