情人节/七夕/520/表白html代码/包100%成功/不舔/做行动的巨人！

最新推荐文章于 2024-09-16 23:05:35 发布
最新推荐文章于 2024-09-16 23:05:35 发布
阅读量73 收藏
点赞数 3
文章标签： html 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2403_82375752/article/details/141095459
版权 

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我喜欢你❤️</title>
    <style>
        html,
        body {
            height: 100%;
            padding: 0;
            margin: 0;
            background: #e4e1bc;
        }

        canvas {
            position: absolute;
            width: 100%;
            height: 100%;
        }

        .text-overlay {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-size: 25px;
            font-family: Arial, sans-serif;
            text-align: center;
            z-index: 1;
        }

        .question-box {
            position: absolute;
            top: 60%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(255, 255, 255, 0.8);
            border-radius: 10px;
            padding: 20px;
            text-align: center;
            z-index: 1;
            width: 300px;
        }

        .question-box h2 {
            margin: 0;
            font-size: 24px;
        }

        .question-box button {
            background-color: #de2727;
            border: none;
            color: white;
            padding: 10px 20px;
            margin: 10px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
        }

        .question-box button:hover {
            background-color: #b72626;
        }

        audio {
            display: none;
        }
    </style>
</head>

<body>
    <canvas id="pinkboard"></canvas>
    <div class="text-overlay">wcy我喜欢你</div>
    <div class="question-box" id="questionBox">
        <h2>你喜欢我吗？</h2>
        <button onclick="handleResponse('喜欢')">喜欢</button>
        <button onclick="handleResponse('我追你')">我追你</button>
    </div>
    <audio id="backgroundMusic" autoplay>
        <source src="background.mp4" type="audio/mp4">
        Your browser does not support the audio element.
    </audio>
    <script>
        function handleResponse(response) {
            alert("你选择了: ‘" + response + "’，真的吗，我好喜欢你呀");
            document.getElementById('questionBox').style.display = 'none';
        }

        window.onload = function () {
            var audio = document.getElementById('backgroundMusic');
            audio.volume = 0.5;
        };

        var settings = {
            particles: {
                length: 500,
                duration: 2,
                velocity: 100,
                effect: -0.75,
                size: 30,
            },
        };

        (function () {
            var lastTime = 0;
            var vendors = ['ms', 'moz', 'webkit', 'o'];
            for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
                window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
                window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
            }
            if (!window.requestAnimationFrame) {
                window.requestAnimationFrame = function (callback) {
                    var now = new Date().getTime();
                    var time = Math.max(0, 16 - (now - lastTime));
                    var id = window.setTimeout(function () { callback(now + time); }, time);
                    lastTime = now + time;
                    return id;
                };
            }
            if (!window.cancelAnimationFrame) {
                window.cancelAnimationFrame = function (id) { clearTimeout(id); };
            }
        })();

        class Point {
            constructor(x = 0, y = 0) {
                this.x = x;
                this.y = y;
            }

            clone() {
                return new Point(this.x, this.y);
            }

            length(length) {
                if (length === undefined) {
                    return Math.sqrt(this.x ** 2 + this.y ** 2);
                }
                this.normalize();
                this.x *= length;
                this.y *= length;
                return this;
            }

            normalize() {
                const len = this.length();
                this.x /= len;
                this.y /= len;
                return this;
            }
        }

        class Particle {
            constructor() {
                this.position = new Point();
                this.velocity = new Point();
                this.acceleration = new Point();
                this.age = 0;
            }

            initialize(x, y, dx, dy) {
                this.position.x = x;
                this.position.y = y;
                this.velocity.x = dx;
                this.velocity.y = dy;
                this.acceleration.x = dx * settings.particles.effect;
                this.acceleration.y = dy * settings.particles.effect;
                this.age = 0;
            }

            update(deltaTime) {
                this.position.x += this.velocity.x * deltaTime;
                this.position.y += this.velocity.y * deltaTime;
                this.velocity.x += this.acceleration.x * deltaTime;
                this.velocity.y += this.acceleration.y * deltaTime;
                this.age += deltaTime;
            }

            draw(context, image) {
                const ease = t => (--t) * t * t + 1;
                const size = image.width * ease(this.age / settings.particles.duration);
                context.globalAlpha = 1 - this.age / settings.particles.duration;
                context.drawImage(image, this.position.x - size / 2, this.position.y - size / 2, size, size);
            }
        }

        class ParticlePool {
            constructor(length) {
                this.particles = Array.from({ length }, () => new Particle());
                this.firstActive = 0;
                this.firstFree = 0;
            }

            add(x, y, dx, dy) {
                this.particles[this.firstFree].initialize(x, y, dx, dy);
                this.firstFree = (this.firstFree + 1) % this.particles.length;
                if (this.firstActive === this.firstFree) {
                    this.firstActive = (this.firstActive + 1) % this.particles.length;
                }
            }

            update(deltaTime) {
                const { particles, firstActive, firstFree } = this;
                for (let i = firstActive; i !== firstFree; i = (i + 1) % particles.length) {
                    particles[i].update(deltaTime);
                }
                while (particles[this.firstActive].age >= settings.particles.duration && this.firstActive !== this.firstFree) {
                    this.firstActive = (this.firstActive + 1) % this.particles.length;
                }
            }

            draw(context, image) {
                const { particles, firstActive, firstFree } = this;
                for (let i = firstActive; i !== firstFree; i = (i + 1) % particles.length) {
                    particles[i].draw(context, image);
                }
            }
        }

        (function (canvas) {
            const context = canvas.getContext('2d');
            const particles = new ParticlePool(settings.particles.length);
            const particleRate = settings.particles.length / settings.particles.duration;
            let time;

            function pointOnHeart(t) {
                return new Point(
                    160 * Math.pow(Math.sin(t), 3),
                    130 * Math.cos(t) - 50 * Math.cos(2 * t) - 20 * Math.cos(3 * t) - 10 * Math.cos(4 * t) + 25
                );
            }

            const image = (function () {
                const canvas = document.createElement('canvas');
                const context = canvas.getContext('2d');
                canvas.width = settings.particles.size;
                canvas.height = settings.particles.size;
                function to(t) {
                    const point = pointOnHeart(t);
                    point.x = settings.particles.size / 2 + point.x * settings.particles.size / 350;
                    point.y = settings.particles.size / 2 - point.y * settings.particles.size / 350;
                    return point;
                }
                context.beginPath();
                let t = -Math.PI;
                let point = to(t);
                context.moveTo(point.x, point.y);
                while (t < Math.PI) {
                    t += 0.01;
                    point = to(t);
                    context.lineTo(point.x, point.y);
                }
                context.closePath();
                context.fillStyle = '#de2727';
                context.fill();
                context.font = '12px Arial';
                context.fillStyle = 'white';
                context.textAlign = 'center';
                context.textBaseline = 'middle';
                context.fillText('love', canvas.width / 2, canvas.height / 2);
                const image = new Image();
                image.src = canvas.toDataURL();
                return image;
            })();

            function render() {
            requestAnimationFrame(render);
            const newTime = Date.now() / 1000;
            const deltaTime = newTime - (time || newTime);
            time = newTime;
            context.clearRect(0, 0, canvas.width, canvas.height);
            const amount = particleRate * deltaTime;
            for (let i = 0; i < amount; i++) {
                const pos = pointOnHeart(Math.PI - 2 * Math.PI * Math.random());
                const dir = pos.clone().length(settings.particles.velocity);
                particles.add(canvas.width / 2 + pos.x, canvas.height / 2 - pos.y, dir.x, -dir.y);
            }
            particles.update(deltaTime);
            particles.draw(context, image);
        }
        function onResize() {
                canvas.width = canvas.clientWidth;
                canvas.height = canvas.clientHeight;
            }
            window.onresize = onResize;

            setTimeout(function () {
                onResize();
                render();
            }, 10);
        })(document.getElementById('pinkboard'));
    </script>
   
</body>

</html>

<&0>
关注
html表白代码动态/520表白html5爱心代码/七夕情人节表白代码/炫酷表白网页html代码
08-21
html表白代码动态/520表白html5爱心代码/七夕情人节表白代码/炫酷表白网页html代码 表白网站主页制作代码 114表白网制作源码 新增模板（亲测） 效果演示http://biaobai-www.diyiyuanma.cn/ 在线制作表白网源码 新年...
七夕情人节表白代码.zip
08-11
七夕情人节表白代码七夕情人节表白代码.zip七夕情人节表白代码.zip七夕情人节表白代码.zip七夕情人节表白代码.zip七夕情人节表白代码.zip七夕情人节表白代码.zip七夕情人节表白代码.zip七夕情人节表白代码.zip七夕...
七夕，情人节，生日表白页面，情人节表白代码
08-10
七夕情人节表白代码 七夕，情人节，生日表白页面，情人节表白代码 适用人群：学习不同技术领域的小白或进阶学习者；可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
七夕情人节表白代码（易语言表白程序/易语言表白源码）
06-09
七夕情人节表白代码（易语言表白程序/易语言表白源码） 效果截图https://xq.seoheimao.cn/1703.html 易语言七夕表白源码、易语言表白程序源代码 七夕情人节表白代码（易语言表白程序/易语言表白源码）
七夕情人节html代码.docx
08-10
创建一个专为七夕情人节设计的HTML页面可以非常有趣且充满浪漫气息。以下是一个简单的HTML示例，包含了一些基本的七夕情人节元素，如心形图案、浪漫的背景颜色、以及一个定制的标题和消息。请注意，这个示例主要使用...
前端用html写excel文件直接打开
全易
09-10 706
html文件直接用excel打开
HTML 揭秘：HTML 编码快速入门
m0_53117341的博客
09-09 1302
HTML 揭秘：HTML 编码快速入门一 . 前端知识介绍二 . HTML 介绍三 . HTML 快速入门四 . HTML 编辑器 - VSCode4.1 插件安装4.2 修改主题配色4.3 修改快捷键4.4 设置自动保存4.5 创建 HTML 文件4.5 书写 HTML 代码4.6 常见快捷键五 . 基础标签5.1 字体标签5.1.1 color 属性5.1.2 size 属性5.1.3 face 属性5.2 i 标签、b 标签5.3 hr 标签5.4 br 标签5.5 center 标签5.6 练习5.
HTML、CSS实现树状图
p_s_p的博客
09-09 651
【代码】HTML、CSS实现树状图。
【HTML】Html标签
千里之行，始于足下
09-12 1120
文本标签、表格标签、表单标签、列表标签、媒体标签、特殊字符、转义字符
使用HTML和CSS制作网页的全面指南
weidl001的博客
09-14 1159
HTML（超文本标记语言）是构建网页的基础语言。它用于定义网页的结构和内容。通过使用不同的标签（tags），我们可以告诉浏览器如何显示文本、图像、链接等。CSS（层叠样式表）用于控制网页的外观和布局。它可以设置文本的颜色、字体、背景、边距等，使网页更加美观和用户友好。通过以上步骤，我们已经了解了如何使用HTML和CSS创建一个简单但完整的网页。主题要点HTML基础了解HTML的结构和常用标签CSS基础理解CSS的语法、选择器和常用属性网页制作步骤规划布局 -> 编写HTML -> 添加CSS实践技巧。
reader-lm：小模型 html转markdown
weixin_42357472的博客
09-12 446
输入网址：https://www.galaxy-geely.com/E5。
介绍一些免费 的 html 5模版网站 和配色 网站
最新发布
小 tom的博客
09-16 709
提示：以下是本篇文章正文内容，下面案例可供参考以下是一些提供免费网站模板的网站，适用于各种类型的网站（如个人博客、企业站点、电子商务等）。这些模板通常带有响应式设计，适用于桌面、平板和移动设备。Wix网站：Wix特点：Wix 提供了大量免费的、可自定义的网站模板，涵盖博客、商业、艺术作品集、在线商店等多种类型。使用他们的拖放式编辑器，可以轻松调整布局和风格。适用对象：新手和不熟悉代码的人。TemplateMo网站：TemplateMo。
《实现 HTML 图片轮播效果》
qq_69304031的博客
09-11 856
在网页设计中，轮播效果是非常常见且重要的元素。它可以在有限的空间内展示多张图片或者广告，能够有效地吸引用户的注意力，提高信息展示的效率。常用于网站首页的焦点图展示、商品图片展示等场景。以下是一个简单的 HTML、CSS 和 JavaScript 实现的图片轮播代码示例。
制作炫酷个人网页：用 HTML 和 CSS3 展现你的风格
m0_61118741的博客
09-12 1500
通过使用 HTML 和 CSS3 的新特性，我们成功打造了一个充满动感、炫酷十足的个人网页。你可以根据自己的喜好继续添加更多效果，比如动画按钮、背景视频等。炫酷设计的背后，是 CSS3 强大的功能。如果你希望让网页更加动感和富有层次感，不妨尝试更多 CSS3 的特性，让每个访问你网页的人都能眼前一亮！
requests-html的具体使用方法有哪些？
2301_79698214的博客
09-12 668
requests-html库还支持使用XPath表达式来查找元素，提供了丰富的功能来满足各种网页数据抓取和分析的需求‌。‌：通过pip安装requests-html库，命令为。‌：通过继续跟踪网页中的链接，可以获取到更多相关内容。
【HTML】HTML页面和常见标签
Yeeear的博客
09-12 6048
什么是前端？HTML页面的编写、如何快速生成代码框架、常见标签（注释标签、标题标签、段落标签、换行标签、格式化标签）
HTML + js 生成一个线路走向图，可以标记总共有多少站，用户到达第几站了
cesske的博客
09-12 1848
HTML + js 生成一个线路走向图例如：用来记录用户到达那一站了，可以标记总共有多少站，用户到达第几站了用来记录用户到达那一站了，可以标记总共有多少站，用户到达第几站了 2.运行 保存为.html，浏览器打开就行了
Html css样式总结
qq_36158551的博客
09-15 912
布局是html中非常重要的一部分，而定位在页面布局中也是使用频率很高的方法，本章节为定位在布局中的使用技巧和注意事项。position定位有4个属性，分别是static(默认），absolute（绝对定位），relative（相对定位），fixed（固定定位–相对于浏览器窗口）。
XWiki中添加 html 二次编辑失效
galoiszhou的博客
09-12 393
使用 XWiki 中的 HTML 宏：如果标准的 Markdown 语法和 XWiki 的链接语法都无法工作，可以考虑使用 HTML 宏，它可以让你在 XWiki 页面中插入纯 HTML 代码，而不会被自动转换回 Markdown。如果直接在 XWiki 中添加 html, 例如 修改颜色, 新窗口打开主页面等功能, 首次保存是生效的. 如果再次编辑, 则失效, 原因是被转换成了 Markdown 的代码, 而 Markdown 不支持.解决这个问题可以使用 HTML 宏.
七夕情人节表白代码html
08-10
七夕情人节表白</title> body { background-color: #FCE4EC; text-align: center; font-family: Arial, sans-serif; } .container { margin-top: 50px; padding: 50px; border-radius: 10px; box-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值