创意代码集合 · 浏览器图形动效与交互实验 · 萤炬工具箱

创意代码集合收了 88 个能直接在浏览器里跑起来的网页动效，主题以表白和节日祝福为主：爱心类（爱心文字雨、满屏文字爱心、跳动爱心）、情人节专题（弹窗表白、表白信封、情话代码）、早安晚安、生日祝福、母亲节、春天主题、中考祝福、愚人节恶搞、清单类等。页面上可以按分类筛选或搜关键词，点卡片就在弹窗里播放效果，也可以新标签页打开单看。适合想给某个日子做个小页面、又不想从零写动画的人。

使用步骤

1. 顶部先按分类筛（爱心表白、情人节表白、生日祝福、早安晚安等），或者直接搜关键词；分类按钮上标着各有多少条。
2. 点任意卡片，效果会在弹窗内嵌的 iframe 里实时播放，看完直接关掉换下一个。
3. 想单独看或分享，用弹窗右下角的「新标签页打开」，拿到该示例的独立地址。
4. 挑中喜欢的记下标题或链接，作为自己做页面时的效果参考。
5. 节日和节点前后会陆续加新示例，隔段时间回来翻一遍。

功能与限制

• 收录 88 个创意代码，分类含爱心表白、情人节表白、早安晚安、生日祝福、母亲节祝福、春天主题、中考祝福、愚人节恶搞、清单类、其他。
• 每个示例是独立的静态页面，预览走弹窗内嵌，也可在新标签页打开。
• 页面提供分类筛选与标题搜索，不含在线代码编辑与源码阅读视图。
• 效果依赖浏览器与设备性能，低端设备请选粒子较少的示例。
• 示例中整合的第三方库各有许可，公开分发或商用前请自行核对。

常见问题

手机上播放会卡吗？

多数示例在手机浏览器能正常播放，粒子数量大的（满屏文字、烟花连发）在低端机上会掉帧。演示给别人看之前先在目标设备上试一遍。

打开是白屏或者画面不动？

先确认浏览器没禁用 JavaScript，再用较新的 Chrome、Edge 或 Safari 打开。个别示例用到较新的浏览器特性，老内核跑不起来，换个浏览器通常就正常。

弹窗里播放和单独打开有区别吗？

效果一样。弹窗只是内嵌预览，方便快速连看多个；要分享或全屏展示就用新标签页打开。

这些例子能拿去做自己的页面吗？

拿来学习和改写没问题。示例里整合的第三方库各有许可，公开发布或商用前请核对对应库的授权要求。

搜不到想要的怎么办？

搜索匹配的是标题文字，用「爱心」「情人节」「晚安」这类词更容易命中；也可以先清空搜索，按分类列表翻一遍。

为什么没有源码查看功能？

当前页面提供的是效果预览与独立链接，不内嵌代码编辑器。想研究实现，直接用新标签页打开该示例，在浏览器里查看它的源码。