某天突发奇想有没有我们结婚日子的域名用来做一个纪念日的网站，然后在域名交易上查找，最后在阿里上看到了yuanzhilai.com

这个域名注册于 2017 年 3 月 13 日，恰是我们结婚的那一天。它不像刻意求来的东西，更像一句被时间悄悄应验的预言：该相遇的人，不必追赶，缘至则来。愿这片小小的角落，收着我们的来路，也接着我们的将来。

「缘至来」——缘分到了，自然就来了。

一、原始代码：能跑，但一身毛病

最初是一份 PHP 和 HTML 混写的单文件。算婚龄：把年月日拼成整数比较算年限展示对应的婚龄称谓。

二、让页面"看得见"：CSS / 动效修复与美化

• 渐变文字标题：补上真正的线性渐变背景 + background-clip: text + sweep 动画，并引入中文书法体 Ma Shan Zheng。

• 纯 CSS 樱花花瓣：用 border-radius: 100% 0 100% 0 + 渐变画出花瓣，不依赖任何图片资源，再修掉 opacity 和无效关键帧的问题。

• 点击开花 + 上升爱心：给 .bloom-flower 加了 bloom 缩放动画，点击时绽放小花并喷出一串向上飘散的爱心。

• 毛玻璃内容卡片：半透明背景 + backdrop-filter + 柔和阴影，整页配色统一成浪漫粉。

• 删掉无用的 canvas 死代码，合并冲突的 body 样式。

三、一步步加料（迭代乐趣）

地基稳了，开始往上面堆浪漫：

1. 趣味天数统计：相伴天数 / 周数 / 小时 / "为你心跳次数"（按每分钟 75 次估算）。

1. 日 / 夜星空主题：右上角一键切换，夜间浮现发光月亮、樱花变星光；用 localStorage 记住选择，首次访问按时间自动判断（晚 7 点到早 6 点默认夜间）。

1. 一键生成纪念卡片：用 html2canvas 把内容卡片截成 2 倍清晰度 PNG 下载，可直接发朋友圈。

1. 烟花礼花：Canvas 粒子引擎（带重力、拖尾、随机色），按钮触发；每年 3-13 纪念日与 2-14 情人节当天自动放。

1. 季节 / 节日特效：背景粒子按月份自动切换——春樱花、夏萤火虫、秋枫叶、冬雪花。

1. 鼠标爱心光晕：光标带柔光晕跟随（夜间变淡紫），移动时偶洒小爱心。

1. 实时时钟 + 纪念日进度条：显示当前日期/星期/时间，并用一条进度条展示"本婚龄年已过 X%"。

1. 长按彩蛋：在页面长按约 0.7 秒，屏幕中央浮现一句随机告白并放一波烟花。

1. 博客首页按钮：右上角 🏠 一键新窗口打开博客。

工具栏最终顺序：🏠 博客 · 🌙 主题 · 📸 卡片 · 🎆 烟花。

效果与源码

整页单文件、零后端依赖，带上 love.gif、favicon.ico 等同目录资源即可运行。纪念日当天打开，会自动下一场樱花雨 + 烟花。

愿每一段缘分，都值得一个会放烟花的页面。💞