首先感谢作者“沐辰”开源的这个源码,本站也是秉承着免费分享的原则发布了这个文章。
项目核心亮点
前端视觉与交互体验(纯原生打造,零框架依赖)
-
沉浸式动态背景:采用Canvas原生实现星空粒子背景搭配粒子连线动画,全程稳定加载100个粒子,营造高级氛围感,视觉层次拉满,同时兼顾页面性能,不卡顿、不占用过多资源。
-
精致鼠标交互效果:专属紫色光晕鼠标跟随特效,跟随鼠标移动流畅过渡,大幅提升页面交互质感,让整体视觉更具灵动性。
-
动态倒计时功能:内置30天自动倒计时模块,搭配专属数字翻转动画,倒计时数值变化流畅自然,视觉效果醒目,适配各类活动、筹备期展示场景。
-
可视化进度展示:专属建设进度条设计,直观呈现项目筹备进度,动态加载效果清晰直白,让访问者快速了解项目推进状态。
-
合规邮箱订阅系统:搭载完整邮箱订阅表单,配套滑块验证码硬核防机器人恶意提交,杜绝垃圾订阅数据,保障订阅数据纯净度。
-
配套私域引流模块:适配微信公众号二维码展示区域,排版规整,适配整体页面风格,助力高效沉淀私域流量。
-
全终端响应式适配:纯手写CSS3精准适配PC端、平板、手机端各类设备,不同屏幕尺寸下布局自适应、内容无错乱,访问体验一致。
-
高级入场动画:集成fadeIn、shimmer等多款丝滑入场动画,页面加载时元素逐次呈现,弱化生硬加载感,整体观感更高级。
后端功能体系(subscribe.php,轻量高效无数据库)
-
双重邮箱格式校验:前端HTML5基础校验+后端filter_var专业校验双重保障,彻底拦截无效邮箱格式,确保订阅数据有效性。
-
订阅数据去重机制:自动识别重复邮箱地址,精准拦截重复订阅操作,避免数据冗余,保障订阅列表整洁。
-
轻量安全数据存储:采用JSON文件存储订阅数据,无需额外搭建数据库,降低部署成本和运维难度;搭配文件锁机制,有效防止并发提交导致的数据错乱。
-
自动邮件通知功能:订阅成功后,自动发送紫色渐变主题的HTML格式确认邮件,样式美观贴合页面主色调,提升用户体验。
-
管理员实时推送:对接ShowDoc微信推送功能,有新用户订阅时,管理员可立即收到微信消息提醒,实时掌握订阅动态,无需时刻盯守后台。
-
原生发信零依赖:采用原生PHP Socket SMTP发信,不依赖第三方邮件插件,兼容性强,部署便捷,发信稳定可靠。
全方位安全防护机制
-
滑块验证码拦截恶意批量提交,从源头抵御机器人刷库、垃圾订阅行为;
-
前端localStorage本地数据备份,降低数据丢失风险;
-
支持CORS跨域配置,适配多场景部署需求,保障跨域访问安全;
-
邮箱格式实行前端+后端双重验证,筑牢数据入口第一道防线。
核心技术栈
全程采用原生技术栈开发,无第三方框架捆绑,代码轻量化、易维护、易二次修改:
-
前端:HTML5 + CSS3(纯手写定制)、原生Vanilla JavaScript(实现粒子动画、倒计时、滑块验证、表单交互等全功能)
-
后端:PHP 7.0及以上版本(原生Socket SMTP发信,无额外依赖)
-
数据存储:JSON文件存储,无需配置数据库,部署门槛极低
快速部署方法
-
将项目全部文件上传至个人虚拟主机或服务器,确保目录完整;
-
打开subscribe.php文件,修改顶部SMTP配置项,完善邮箱账号、授权码等关键信息;
-
检查服务器权限,确保PHP具备文件写入权限,保障订阅数据正常存储、邮件正常发送;
-
替换项目内微信公众号二维码图片为自身专属二维码,完成私域模块配置;
-
直接访问绑定域名,即可完成全部部署,正常使用所有功能。
个性化自定义指南
项目支持零门槛个性化修改,无需深厚代码基础,按需替换对应参数即可:
-
品牌信息替换:全局搜索关键词AMUCHEN和沐辰网络,一键替换为自身品牌名称,快速适配品牌形象;
-
倒计时时长修改:在JS代码中找到setDate(+30)语句,直接修改数字即可调整倒计时天数,适配不同周期需求;
-
进度条调整:同步修改CSS中progressGrow动画参数与HTML里的35%进度数值,自定义项目建设进度展示;
-
主题配色修改:页面主色调为#a78bfa(紫色),全局搜索该色值,替换为心仪配色,快速更改整体主题风格;
-
邮件模板定制:在subscribe.php文件中,可自行编辑HTML格式邮件内容,调整邮件文案、样式,贴合品牌调性。

