一个单文件HTML5 Canvas交互式英雄横幅,通过跟随光标的发光的彗星轨迹,揭示隐藏的五档路飞图像。

Stars

110

7 天增长

暂无数据

Fork 数

22

开放 Issue

0

开源协议

暂无数据

最近更新

2026-06-26

AI 仓库情报摘要
FR-AI / ANALYSIS

为什么值得关注

它展示了巧妙、轻量的Canvas合成技术(source-in遮罩),无需任何框架或构建工具即可实现流畅、可定制的悬停揭示效果。

适合谁使用

  • 探索Canvas动画的Web开发者
  • 创作粉丝项目的海贼王爱好者
  • 寻找交互式英雄横幅灵感的设计师
  • 想要无构建步骤演示的前端爱好者

典型使用场景

  • 动漫或粉丝网站的交互式英雄横幅
  • 展示Canvas遮罩效果的作品集
  • 可定制的悬停揭示组件用于产品展示
  • Canvas复合操作的教学示例

项目优势

  • 自包含的单个HTML文件,内置base64图像,离线可运行(除首次加载字体外)
  • 响应式且支持设备像素比,兼容触控设备
  • 可轻松调整轨迹长度、揭示半径、光标平滑度和叠加层暗度等参数
  • 无依赖或构建步骤,适用于所有现代浏览器

使用前须知

  • 图像以base64数据URI提供(可能较大);生产环境需替换为自有素材
  • 依赖Google Fonts进行徽标近似,初次需要网络连接
  • 效果仅支持指针输入(鼠标或触摸),无键盘回退
  • 使用文件路径而非base64时,源图像需来自同源

README 快速开始

Quick start

相关仓库与替代方案

根据分类、Topic 和编程语言匹配的相似项目。

ViffyGwaanl
精选
ViffyGwaanl GitHub avatar

kimi-k3-learn

An interactive learning system that turns the 47-page Kimi K3 technical report into a single offline HTML file with running algorithms, 3D visualizations, spaced repetition quizzes, and a smart highlighting QA tool.

AI 与机器学习
15
osama-fawad
osama-fawad GitHub avatar

Pekingman

Pekingman is a multimodal agent system that integrates perception, long-term memory, human-like reasoning, emotional consistency, and real-time action to create believable NPC behavior.

HTML
933
syabro
syabro GitHub avatar

neat-annotations

A CSS-only library for adding hand-drawn arrows and handwritten labels to any webpage using a single self-contained stylesheet, no JavaScript or build tools required.

HTML
378