介绍
这个包围绕掏空字体和晃动特效本体展开。首屏中央是描边镂空大字,后方有可切换的颜色层和网格底纹,点击控制按钮可调整晃动幅度与背景风格,适合主标题、杂志封面和潮流活动页的字效模块。

技术栈
页面由 index.html、styles.css 和 script.js 组成,直接双击即可运行,不依赖 npm、框架或外部 CDN。
软件架构
- index.html:负责首屏主体、交互按钮和内容说明区。
- styles.css:负责布局、设计变量、动画节奏、响应式与 reduced-motion 降级。
- script.js:负责状态切换、鼠标反馈、按钮联动和动态文案刷新。
- preview.png:当前页面的真实浏览器截图,可直接用作下载页封面。
安装教程
- 下载并解压 zip 压缩包。
- 进入同名目录后双击 index.html 直接预览。
- 如果要部署到站点,把整个目录上传到静态服务器即可。
使用说明
点击幅度按钮可以切换轻晃、标准和强化三种抖动强度,点击背景按钮可以更换底层色块与纹理。实际复用时只需要替换标题词组和色板变量,就能快速改造成封面标题、栏目头图或海报字效组件。
功能讲解
- 首屏主体是掏空描边文字与动态底层,不再沿用弧形排版模板。
- 晃动强度和背景层会同步变化,能直观展示掏空字体的动态状态。
- 保留足够的留白和响应式结构,便于继续接入品牌词、节庆文案或栏目名。
