一个自用的高质量网页代码合集，包含实用的 HTML、CSS、JavaScript 片段。基于 MIT 协议开源，可随意复用、修改、集成到任何个人或商业项目中。
WebUtils 是我在日常前端开发中积累的可复用代码片段仓库。每个片段都力求：
- 功能独立 – 不依赖第三方库，纯原生 HTML/CSS/JS 实现
- 配置灵活 – 通过
data-*属性或 CSS 变量控制行为 - 易于移植 – 单个
.html+.css+.js文件，拷贝即用
目前收录的模块包括（持续更新）：
- 动态文本特效引擎（单色/多色/渐变变色、抖动、乱码混淆）
- （后续会添加更多：按钮特效、表单美化、加载动画、工具函数等）
💡 所有代码均已在主流浏览器（Chrome / Firefox / Edge / Safari）中测试通过。
- 浏览仓库目录，找到你需要的特效模块（例如
DynamicTextEngine/）。 - 将对应的
.html、.css、.js文件复制到你的项目中。 - 在页面中引入 CSS 和 JS 文件，并按示例添加 HTML 标记。
每个模块的 README（位于模块子目录）中都包含了详细的配置属性和示例代码。你可以直接复制 HTML 结构，并修改 data-* 属性来调整效果。
<link rel="stylesheet" href="path/to/DynamicTextEngine.css">
<script src="path/to/DynamicTextEngine.js"></script>
<div class="effect-text mono-color" data-type="warning">磁盘空间不足</div>更完整的用法请参考各模块的独立文档。
点击展开查看展示截图
| 名称 | 展示 |
|---|---|
| DynamicTextEngine |  |
更多主题截图请查看
screenshot/目录。
本项目遵循统一的编码风格，以保证代码可读性和可维护性。详细规范请参阅 CodingStyle.md。
要点摘要：
- HTML：使用语义化标签，缩进 2 空格，
id/class采用 kebab-case - CSS：采用 BEM 命名法（可选），变量定义在
:root中，避免!important - JavaScript：ES6+ 语法，使用
'use strict'，函数命名采用 camelCase，常量使用 UPPER_SNAKE_CASE - 注释：关键逻辑必须注释，文件头部包含版权和 SPDX 标识
A：可以。本项目采用 MIT 许可证，允许任何人将代码用于闭源商业软件，只需保留原始版权声明。
A：请提交 Issue，详细描述问题、复现步骤、浏览器版本，并贴上相关代码片段。
A：当然可以。每个模块的 CSS 和 JS 都是独立封装的，你可以只提取你需要的样式或函数。但建议保留版权注释，以遵守 MIT 协议。
A：大多数效果通过 data-* 属性配置（如 data-color、data-speed）。具体参数请查看对应模块的 README 文件。
欢迎提交 Issue 和 Pull Request。贡献前请确保：
- 代码遵循 CodingStyle.md 规范。
- 新功能或 bug 修复经过本地测试（至少覆盖 Chrome 和 Firefox）。
- 更新相关文档（如模块内的 README、本仓库的 README 如有必要）。
- 对于较大改动，建议先开 Issue 讨论设计。
详细流程请参考 CONTRIBUTING.md。
我们同样遵循 行为准则，请共同营造友善的开源社区。
本项目自身源代码采用 MIT 许可证 开源。详情请参阅项目根目录下的 LICENSE 文件。
MIT 许可证允许你：
- ✅ 商业使用
- ✅ 修改代码
- ✅ 分发代码
- ✅ 私人使用
唯一要求：保留原始版权和许可声明。
- 作者：CrimsonSeraph
- BiliBili：浪天幽影 (UID: 1741002917)
- X (Twitter)：𝒞𝓇𝒾𝓂𝓈𝑜𝓃𝒮𝑒𝓇𝒶𝓅𝒽✟升天✟ (@CrimSeraph_QwQ)
- GitHub：CrimsonSeraph
- 项目主页：https://github.com/CrimsonSeraph/WebUtils
如果你觉得这个仓库对你有帮助，欢迎点个 ⭐Star 支持一下！