测试 Blur.astro 组件

这篇文章用来测试我新创建的 Blur.astro 组件，该组件复刻了 Vue 博客中的 Blur 组件功能。

测试基本用法

测试使用插槽

测试在段落中使用

这是一个普通的段落，其中包含 一段模糊文本 ，鼠标悬停时会显示清晰内容。

测试在列表中使用

• 列表项 1
• 列表项 2，包含 模糊文本
• 列表项 3

测试在标题中使用

模糊的标题

这是一个二级标题，其中包含模糊文本。

测试嵌套使用

测试效果说明

• 基本用法：鼠标悬停时，模糊文本会逐渐清晰显示
• 过渡效果：模糊到清晰的过渡时间为 0.2 秒，使用 ease 缓动函数
• 光标样式：鼠标悬停时显示指针光标
• 灵活使用：可以通过 text 属性或插槽传递文本
• 嵌套使用：支持嵌套使用，内层和外层可以独立触发模糊效果

结论

Blur.astro 组件已经成功实现了预期功能，完全适配了博客的布局和样式。组件支持多种使用方式，可以灵活地嵌入到各种文本内容中。

你可以通过修改组件的样式来调整模糊程度、过渡时间和其他视觉效果。