博客类别

发展
2025 年 10 月 24 日

可爱又有趣的 HTML Bucin 脚本，让你的暗恋对象留下深刻印象

厌倦了用千篇一律的聊天方式表达感情？想找一种反主流的约会方式，既有点呆板，又保证有趣又难忘？何不试试你自己的专属网页呢？

想象一下：你给你心仪的对象发了一个链接。对方打开后，一个甜蜜的网页出现了一个问题：“你愿意做我的女朋友/男朋友吗？”。网页下方有两个按钮：“绝对愿意！”和“不可以。”

有趣的是：每次他们尝试点击“否”，按钮就会跑开，移动到屏幕上的另一个位置。他们越是试图拒绝，就越难，而且“绝对！”按钮只会越来越大。.

这是一个“可爱的 HTML 脚本”——一种展示努力的创造性方式，至少会让你暗恋的人笑。.

本文将为您提供完整的指南，, 包括 HTML 代码, ，创建了这个互动式忏悔页面。.

什么是可爱的 HTML 脚本？

简单来说，这是一个 .html 包含三个元素的文件：

HTML： 作为页面的框架或结构。它会显示文本、GIF 和两个按钮。.
CSS（顺风）： “美化”页面。CSS 负责处理布局、颜色、字体和动画，使页面看起来美观且专业。.
JavaScript： 这就是恶作剧背后的“大脑”。JavaScript 负责检测光标何时接近“否”按钮，并立即将其移动到随机位置，同时将其文本更改为更有趣的内容。.

这三者的结合创造了一种互动且可爱的小游戏体验。.

为什么要带着剧本约会别人？

在这个数字时代，这种方法有几个优点：

独特而难忘： 这显然比 WhatsApp 或 DM 上的“我喜欢你”消息更令人难忘。.
展现努力： 你不只是在输入消息；你建筑某事。这体现了奉献精神和真诚的意图（即使方式有些恶作剧）。.
有趣且打破僵局： 它的游戏性质可以缓解紧张情绪。如果他们笑了，那就已经是一个很好的开始！
交互的： 他们不只是阅读，还可以互动。这创造了一种更加个性化和有趣的体验。.

如何创建和使用脚本（完整教程）

准备好采取行动了吗？请按照以下步骤操作。.

步骤 1：复制完整代码

这就是您需要的全部代码。除非您想更改文本或 GIF 链接，否则无需进行任何更改。.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>给你的留言❤️</title>
    <!-- Load Tailwind CSS -->
    <script src="[https://cdn.tailwindcss.com](https://cdn.tailwindcss.com)"></script>
    <!-- Load Custom Fonts (Gochi Hand for handwritten & Inter for body) -->
    <style>
        @import url('[https://fonts.googleapis.com/css2?family=Gochi+Hand&family=Inter:wght@400;700&display=swap](https://fonts.googleapis.com/css2?family=Gochi+Hand&family=Inter:wght@400;700&display=swap)');

        body {
            font-family: 'Inter', sans-serif;
            /* Soft background gradient effect */
            background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4f46e5 100%);
            overflow: hidden; /* Prevents scrolling when the button moves */
        }

        /* Custom font for the question, makes it feel personal */
        .font-question {
            font-family: 'Gochi Hand', cursive;
        }

        /* Set up the "No" button to be movable */
        #no-button {
            position: absolute;
            transition: all 0.3s ease-in-out;
            /* Ensure this button is on top of other elements when moving */
            z-index: 10;
        }

        /* The "Yes" button will be on top if they overlap */
        #yes-button {
            position: relative;
            z-index: 20;
        }
    </style>
</head>
<body class="text-white min-h-screen flex items-center justify-center p-4">

    <!-- Main Content: The Question -->
    <div id="main-content" class="bg-gray-900 bg-opacity-70 backdrop-blur-lg p-8 md:p-12 rounded-2xl shadow-2xl text-center max-w-lg w-full transition-all duration-500 ease-in-out transform scale-100 opacity-100">
        <!-- Cute Opening GIF -->
        <img src="[https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExM3ZkZ3h5dG9qbnYybjBqNnZ2OHJ0bTlnNGg2dHd3dDZtMmk1cDRsZSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/cLS1cfxvGOPVpf9g3v/giphy.gif](https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExM3ZkZ3h5dG9qbnYybjBqNnZ2OHJ0bTlnNGg2dHd3dDZtMmk1cDRsZSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/cLS1cfxvGOPVpf9g3v/giphy.gif)"
             alt="可爱害羞的 GIF"
             class="w-48 h-48 mx-auto rounded-full mb-6 shadow-lg border-4 border-pink-400 object-cover">

        <h1 class="font-question text-4xl md:text-5xl font-bold text-pink-400 mb-6">
            嘿，你…….
        </h1>
        <p class="text-2xl md:text-3xl mb-10 font-question text-gray-200">
            我有一个问题...但别生气，好吗？
        </p>

        <p class="text-xl md:text-2xl mb-10 font-semibold text-white">
            你愿意做我的女朋友/男朋友吗？🥺👉👈
        </p>

        <!-- Button Container -->
        <!-- Made 'relative' so the "No" button can move within it -->
        <div class="relative flex flex-col sm:flex-row justify-center items-center gap-4 h-24">
            <!-- The "Yes" Button -->
            <button id="yes-button"
                    class="bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-8 rounded-lg text-lg transition-all duration-300 transform hover:scale-110 shadow-lg">
                绝对地！
            </button>

            <!-- The "No" Button (The one that moves) -->
            <button id="no-button"
                    class="bg-red-500 hover:bg-red-600 text-white font-bold py-3 px-8 rounded-lg text-lg transition-all duration-300 shadow-lg"
                    style="left: 55%; transform: translateX(-50%);">
                不。.
            </button>
        </div>
    </div>

    <!-- Success Message (Hidden) -->
    <div id="success-message"
         class="hidden bg-gray-900 bg-opacity-70 backdrop-blur-lg p-8 md:p-12 rounded-2xl shadow-2xl text-center max-w-lg w-full transition-all duration-500 ease-in-out transform scale-0 opacity-0">
        <!-- Success/Love GIF -->
        <img src="[https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExZGphY3k1N3VqajJ0bTgzZzdoY2U1N3Z0bGh5NnlqaWZnZDAweHFuZSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/9GimADhYmMB2ssdNf3/giphy.gif](https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExZGphY3k1N3VqajJ0bTgzZzdoY2U1N3Z0bGh5NnlqaWZnZDAweHFuZSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/9GimADhYmMB2ssdNf3/giphy.gif)"
             alt="爱情 GIF"
             class="w-48 h-48 mx-auto rounded-full mb-6 shadow-lg border-4 border-green-400 object-cover">

        <h1 class="font-question text-5xl md:text-6xl font-bold text-green-400 mb-6">
            耶！
        </h1>
        <p class="text-2xl md:text-3xl font-question text-gray-200 mb-8">
            呵呵，我太喜欢你了！❤️
        </p>
        <p class="text-lg text-gray-300">
            （看到这个后给我发短信，好吗？）
        </p>
    </div>

    <script>
        const yesButton = document.getElementById('yes-button');
        const noButton = document.getElementById('no-button');
        const mainContent = document.getElementById('main-content');
        const successMessage = document.getElementById('success-message');

        // Funny texts for the "No" button
        const noButtonTexts = [
            "No.",
            "Are you sure? :(",
            "Please?",
            "C'mon!",
            "You can't say no!",
            "Just press 'Yes' >.<",
            "Don't be like that :'(",
            "I'll treat you to dinner",
            "HMMMMM"
        ];

        let yesButtonScale = 1; // Initial scale of the "Yes" button
        let noButtonTextIndex = 0; // Index for the "No" button text

        // When the "Yes" button is clicked
        yesButton.addEventListener('click', () => {
            // Hide the main content
            mainContent.classList.add('scale-0', 'opacity-0');

            // Show the success message after 500ms
            setTimeout(() => {
                mainContent.classList.add('hidden');
                successMessage.classList.remove('hidden', 'scale-0', 'opacity-0');
                successMessage.classList.add('scale-100', 'opacity-100');
            }, 500);
        });

        // Function to move the "No" button
        function moveButton() {
            // Get the viewport size
            const viewportWidth = window.innerWidth;
            const viewportHeight = window.innerHeight;

            // Get the button size
            const buttonWidth = noButton.offsetWidth;
            const buttonHeight = noButton.offsetHeight;

            // Calculate a new random position
            let newX = Math.random() * (viewportWidth - buttonWidth - (viewportWidth * 0.1));
            let newY = Math.random() * (viewportHeight - buttonHeight - (viewportHeight * 0.1));

            newX += (viewportWidth * 0.05);
            newY += (viewportHeight * 0.05);
            
            // Apply the new position
            noButton.style.position = 'fixed'; 
            noButton.style.left = `${newX}px`;
            noButton.style.top = `${newY}px`;

            // Enlarge the "Yes" button
            yesButtonScale += 0.2;
            yesButton.style.transform = `scale(${yesButtonScale})`;
            yesButton.style.transition = 'transform 0.3s ease';

            // Change the "No" button text
            noButtonTextIndex = (noButtonTextIndex + 1) % noButtonTexts.length;
            noButton.innerText = noButtonTexts[noButtonTextIndex];
        }

        // Move the button when the mouse hovers over it
        noButton.addEventListener('mouseover', moveButton);

        // Move the button when it's clicked (for mobile devices)
        noButton.addEventListener('click', moveButton);
    </script>
</body>
</html>

步骤 2：将代码保存为 HTML 文件

打开一个简单的文本编辑器程序，如 记事本 （在 Windows 上）或 文本编辑 （在 Mac 上）。.
粘贴将上面的整个代码放入其中。.
单击“文件”>“另存为...”。.
在 “文件名” 字段、类型 索引.html.
在 “保存类型” 字段，请确保选择 “所有文件”.
点击“保存”。.

现在你有了一个 索引.html 你可以在浏览器中打开这个文件。但是等等，它还在你的电脑里。你的暗恋对象看不到它。你需要把它上传到网上。.

步骤 3：上传脚本并将其上传到网上（免费！）

您不能发送 索引.html 通过WA提交文件。你必须发送关联. 。获取链接的最简单方法是将您的文件上传到免费的静态托管服务。.

选项 1：Netlify Drop（最简单）

打开 app.netlify.com/drop 在您的浏览器中。
您将看到一个框拖放.
拖动 索引.html 将刚刚保存的文件放入框中。.
等待几秒钟...
完成！Netlify 将立即为您提供一个公共链接（例如： https://random-funny-name.netlify.app）。这是您发送给暗恋对象的链接！

选项 2：CodePen

前往 codepen.io 并注册一个免费帐户。.
创建一个新的“笔”。.
将代码部分复制到 3 个相应的框中（代码在 ... 进入 CSS 框，里面的代码 <script>...</script> 进入 JS 框，其余进入 HTML 框）。.
保存您的 Pen，您将获得一个可以分享的链接。.

步骤 4：发送链接！

现在你有了终极武器：一个链接。把它发给你的暗恋对象，并附上一个随意的开场白。.

例子：

“嘿，我正在学编程，做了个这个傻乎乎的东西。快来看看😆 [你的链接在这里]”
“我有一个重要的问题，但你必须在这里回答……[your-link-here]”
“在浏览器中打开这个，有小惊喜哦呵呵[你的链接在这里]”

结论：用现代方式表达关怀

创建这个小网页是一件有趣、有创意且绝对 反主流 表达感受的方式。这充分证明了“努力”有多种形式，包括代码。.

虽然这只是一个有趣的项目，但它是迈向 Web 开发世界的第一步。说不定，从编写一个可爱的脚本开始，你就会对构建真正的网站或应用程序产生兴趣。.

当你准备好将你的伟大想法在网上实现时，, 网站托管 Quape 是您的正确起点。我们为您的所有 Web 项目（从简单到复杂）提供可靠、快速的平台。.

祝你好运！

关于
最新文章

艾哈迈德·法里德

一位在主机托管、域名和服务器方面拥有丰富经验的SEO专家。在之前的公司，他通过提供自然流量和关键词排名，创造了可观的收入。

Achmad Farid 的最新帖子 (查看全部)

关于
最新文章

艾哈迈德·法里德

一位在主机托管、域名和服务器方面拥有丰富经验的SEO专家。在之前的公司，他通过提供自然流量和关键词排名，创造了可观的收入。

Achmad Farid 的最新帖子 (查看全部)

发表回复取消回复

让我们保持联系！

怀揣梦想，与我们一同启程。我们专注于创新，并致力于将一切变为现实。

EN

EN

可爱又有趣的 HTML Bucin 脚本，让你的暗恋对象留下深刻印象

什么是可爱的 HTML 脚本？

为什么要带着剧本约会别人？