For Tailwind CSS v3 docs, click here.

图片轨迹光标

一个交互式光标效果，创建动态的图片轨迹，跟随鼠标移动，支持多种动画变体。

API 接口

属性名类型默认值描述
imagesstring[][]用于轨迹效果显示的一组图片 URL。
variantVariantType"type1"动画变体类型（从 "type1" 到 "type7"）。

💡 该组件创建一个全宽全高的容器，拥有较高的 z-index 用于光标跟踪。每张图片宽度为190px，宽高比为1.1，带有圆角。

使用 CLI 安装

npm
pnpm
bun
yarn
npx shadcn-vue@latest add "https://registry.inspira-ui.com/image-trail-cursor.json"

手动安装

ImageTrailCursor.vue
trail-variants.ts
特性
  • 多种动画变体：提供7种不同的轨迹动画样式和行为选择。
  • 动态图片渲染：平滑过渡图片的不透明度和变换效果。
  • 响应式设计：图片自动缩放，带圆角并处理溢出显示。
  • 内存管理：变体切换时自动销毁并重建实例，防止内存泄漏。
  • 性能优化：使用 will-change CSS 属性，实现流畅的 GPU 加速动画。
  • 灵活的图片支持：接受任意数组的图片 URL，支持自定义视觉内容。
注意事项
  • 组件使用变体系统，动画类在 trail-variants.ts 中映射。
  • 图片采用绝对定位，带有轻微溢出效果（尺寸大20px，偏移-10px），以实现更流畅的视觉过渡。
  • 容器保持较高的 z-index（100），确保轨迹效果显示在其他内容之上。
  • 在组件卸载和变体切换时，正确清理实例，避免内存泄漏。
致谢
  • 灵感来自现代光标轨迹效果和图片悬停交互。
  • 基于 Vue 3 组合式 API 构建，实现最佳响应性和性能。
  • 移植自 Codrops 文章
流体光标
一个模拟流体运动的GPU加速动画光标轨迹。
Sleek Line Cursor
使用弹簧物理和动态色彩波动，实现顺滑波浪动画效果的响应式光标拖尾组件。