介绍
这个包把流水文字和动态图片组合成一张完整的水波海报。首屏下半部分是持续起伏的水面,上方叠加主标题和反射倒影,右侧卡片则模拟图片封面和场景标签,适合做活动预热页、夏日 Banner 或品牌海报的主视觉模块。

技术栈
页面由 index.html、styles.css 和 script.js 组成,直接双击即可运行,不依赖 npm、框架或外部 CDN。
软件架构
- index.html:负责首屏主体、交互按钮和内容说明区。
- styles.css:负责布局、视觉变量、动画节奏、响应式和 reduced-motion 降级。
- script.js:负责状态切换、按钮联动和动态展示逻辑。
- preview.png:当前页面的真实浏览器截图,可直接作为下载页封面。
安装教程
- 下载并解压 zip 压缩包。
- 进入同名目录后双击 index.html 直接预览。
- 如果要部署到站点,把整个目录上传到静态服务器即可。
使用说明
打开页面后可以点击右侧场景按钮,在清晨、正午和夜色三种模式之间切换,水面高光、倒影颜色和配图说明会同步更新。需要复用时,替换标题、场景数据和右侧图片文案即可。
功能讲解
- 首屏主体改成了水面反射场景,和前两个文字包在构图上完全分开。
- 水波层、倒影标题和场景卡联动更新,适合直接做夏日海报或动态封面。
- 右侧保留图片说明模块,便于下载后继续接入真实封面图或场景标签。
