浪漫告白网页，原生 “HTML + CSS + JavaScript + Canvas”编写

CHUY · 发表于 2026-7-22 23:57

本帖最后由 CHUY 于 2026-7-31 21:24 编辑

🌍 可能是全世界最没用的开源项目之一——不能提高工作效率，也不能帮你赚钱，只能帮你把喜欢说得浪漫一点。
这是一个使用原生 HTML + CSS + JavaScript + Canvas 编写的浪漫礼物网页，没有使用 Vue、React 等框架，不需要安装依赖，也不需要数据库。效果流程

打开后先进入密码解锁页面，背景有环境光和樱花飘落效果。
输入正确密码后进入礼物页面。
点击礼物，开始播放背景音乐和烟花动画。
自定义文字会以磨砂玻璃弹窗陆续出现。
最后由大量弹窗组成爱心，并触发爱心粒子爆炸。
底部可以控制音乐、烟花和纯享模式。

适合用来做表白、纪念日、生日祝福、电子礼物，或者学习 Canvas 粒子动画。

[Asm] 纯文本查看 复制代码

<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
    <!-- Favicon -->
    <link rel="icon" type="image/png" href="gift.png">
    <meta name="description" content="一份带有音乐、烟花、爱心爆炸和浪漫弹窗的电子礼物">
    <title>浪漫告白礼物 · 烟花与心意</title>
    <!-- 检查是否已登录，未登录则跳转 -->
    <!-- 礼物页访问检查：必须先从登录页输入正确密码 -->
    <script>
        if (!sessionStorage.getItem('loggedIn')) {
            window.location.href = 'index.html';
        }
    </script>
    <!-- 礼物页全部样式：烟花、弹窗、控制栏、爱心和赞赏弹窗 -->
    <style>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
    <!-- Favicon -->
    <link rel="icon" type="image/png" href="gift.png">
    <meta name="description" content="一份带有音乐、烟花、爱心爆炸和浪漫弹窗的电子礼物">
    <title>浪漫告白礼物 · 烟花与心意</title>
    <!-- 检查是否已登录，未登录则跳转 -->
    <!-- 礼物页访问检查：必须先从登录页输入正确密码 -->
    <script>
        if (!sessionStorage.getItem('loggedIn')) {
            window.location.href = 'index.html';
        }
    </script>
    <!-- 礼物页全部样式：烟花、弹窗、控制栏、爱心和赞赏弹窗 -->
    <style>
        /* 页面主题色和通用玻璃效果参数 */
        :root {
            --ios-glass: rgba(255, 255, 255, 0.65);
            --ios-blur: blur(25px);
            --accent-color: #ff4d88;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

        body {
            background: #000;
            color: #fff;
            font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
            overflow: hidden;
            width: 100vw;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* Fireworks Canvas */
        #fireworks {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            pointer-events: auto; 
        }

        /* Overlay for interaction */
        #overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.85);
            backdrop-filter: blur(15px);
            z-index: 9999;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            transition: opacity 0.8s ease;
            pointer-events: auto;
        }

        .gift-box {
            font-size: 80px;
            animation: bounce 2s infinite;
            cursor: pointer;
            margin-bottom: 20px;
        }

        .tap-hint {
            font-size: 18px;
            font-weight: 500;
            opacity: 0.8;
            letter-spacing: 1px;
        }

        @keyframes bounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-20px); }
        }

        /* Container for Popups - Full Screen */
        .notification-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 100;
            pointer-events: none;
        }

        /* Apple Style Frosted Glass Popup */
        .popup {
            position: absolute;
            width: auto;
            min-width: 150px;
            max-width: 300px;
            min-height: 80px;
            
            /* Enhanced Apple Glass Effect */
            background: rgba(255, 255, 255, 0.75);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.4);
            box-shadow: 
                0 8px 32px rgba(0, 0, 0, 0.1),
                0 2px 10px rgba(255, 77, 136, 0.05);
            
            border-radius: 20px;
            
            opacity: 0;
            transform: scale(0.92) translateY(8px);
            transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
            
            pointer-events: auto;
            z-index: 100;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .popup-content {
            width: 100%;
            padding: 18px 20px;
            color: #1d1d1f;
            font-size: 14px;
            font-weight: 500;
            line-height: 1.5;
            letter-spacing: -0.01em;
            text-align: center;
white-space: normal;
            word-wrap: break-word;
            overflow: hidden;
        }

        .popup.show {
            opacity: 1;
            transform: scale(1) translateY(0);
        }
        
        /* Heart Popup Styles - Bigger and better looking */
        .heart-popup {
            position: absolute;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 18px;
            box-shadow: 0 4px 20px rgba(255, 105, 180, 0.5);
            border: 2px solid rgba(255, 255, 255, 0.8);
            padding: 12px 10px;
            opacity: 0;
            transition: all 0.5s;
            z-index: 1001;
            background: linear-gradient(135deg, #ff9a9e, #fecfef);
            font-size: 13px;
            color: #d23669;
            font-weight: bold;
            transform: translate(-50%, -50%) scale(0.8);
            animation: heartPulse 1.5s infinite;
            min-width: 100px;
            min-height: 55px;
            text-align: center;
            white-space: nowrap;
        }
        
        @keyframes heartPulse {
            0% { transform: translate(-50%, -50%) scale(0.8); }
            50% { transform: translate(-50%, -50%) scale(0.95); }
            100% { transform: translate(-50%, -50%) scale(0.8); }
        }
        
        .heart-popup.show {
            opacity: 1;
        }

主要功能

密码解锁与错误抖动提示
手机和电脑自适应
Canvas 樱花飘落
背景音乐播放与暂停
多种烟花动画
点击屏幕放烟花
自定义情话弹窗
爱心形状弹窗
爱心粒子爆炸
烟花纯享模式
无第三方依赖，可以离线运行

详细内容与修改下载文件查看
源件下载：https://chyubaby.lanzout.com/idIH13y1y0ng 密码:8k1a
github分享：https://github.com/YU123-ZZZ/romantic-gift-web

duzboy · 发表于 2026-7-24 15:58

放了一个预览地址，感兴趣的可以点开看看或者扫码打开
https://duzboy.pages.dev

因为域名没在国内和微信备案，所以微信打不开，用手机系统扫码或者浏览器打开

TaDxx · 发表于 2026-7-23 03:21

本帖最后由 TaDxx 于 2026-7-23 03:55 编辑

赞扬你的分享精神，但批判你的错误认知，这年代还想舔出真爱，是误导公众！真理往往是反直觉的。
正确做法是：不暴露需求感，轻松无欲地暧昧调情，氛围好就推进关系，自然地或霸道地拥抱亲吻…… 要让女方开口求你确认关系！
必须先有事实关系，再口头确认，不能搞反了，不能被偶像剧误导了。你这样只会给对方抉择压力，大概率被拒。

pserlee · 发表于 2026-7-23 06:39

TaDxx 发表于 2026-7-23 03:21
赞扬你的分享精神，但批判你的错误认知，这年代还想舔出真爱，是误导公众！真理往往是反直觉的。
正确做法 ...

送给媳妇，老夫老妻的，过生日、节日小小的浪一下，比买花做饭省事！

duzboy · 发表于 2026-7-24 09:54

zhangt729 发表于 2026-7-23 08:36
所以，密码是啥呢

默认访问密码：888888
默认入口：index.html

在源代码路径：zhu/index.html 539行代码，可以改
const DEFAULT_PASSWORD = '888888'; // 模板默认密码，可在这里修改

有白云的日子。 · 发表于 2026-7-23 05:25

从学习技术角度来讲很好。

FreeGay · 发表于 2026-7-23 05:43

学习到了，谢谢分享

Mzhang2008 · 发表于 2026-7-23 07:07

大写的六六六

goin · 发表于 2026-7-23 07:18

感谢分享，新人

zhangt729 · 发表于 2026-7-23 08:36

所以，密码是啥呢

apull · 发表于 2026-7-23 08:39

很有意思的工具。多谢分享

请叫我小希 · 发表于 2026-7-23 08:48

哎哟！挺调皮哦

帐号		自动登录	找回密码
密码			注册[Register]

[其他原创] 浪漫告白网页，原生 “HTML + CSS + JavaScript + Canvas”编写

免费评分