【HTML超浪漫的表白网页代码】不会编程也能制作送给女朋友的表白网站

❤ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 web前端期末大作业: 【📚HTML5网页期末作业 (1000套) 】
🧡 程序员有趣的告白方式:【💌HTML七夕情人节表白网页制作 (125套) 】
七夕来袭!是时候展现专属于程序员的浪漫了!你打算怎么给心爱的人表达爱意?鲜花礼物?代码表白?还是创意DIY?或者…无论那种形式,快来秀我们一脸吧!


📂文章目录

  • 二、📚网站介绍
  • 三、🔗网站效果
    • ▶️1.视频演示
    • 🧩 2.图片演示
  • 四、💒 网站代码
    • 🧱HTML结构代码
  • 五、🎁更多源码


二、📚网站介绍

📒网站文件方面:html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件;

📙网页编辑方面:可使用任意HTML编辑软件(如:Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作)。
其中:
(1)📜html文件包含:其中index.html是首页、其他html为二级页面;
(2)📑 css文件包含:css全部页面样式,3D动态效果,雪花飘落等等
(3)📄 js文件包含:页面炫酷效果实现


三、🔗网站效果

▶️1.视频演示

54-樱花雨+爱心3D相册

🧩 2.图片演示

在这里插入图片描述


四、💒 网站代码

🧱HTML结构代码


<!--* @Author: ruanjiafeng* @Date: 2021-03-12 09:05:12* @LastEditTime: 2021-03-12 10:14:58* @LastEditors: Please set LastEditors* @Description: In User Settings Edit* @FilePath: \canvas绘制爱心❤\index.html
-->
<!DOCTYPE html>
<html><head><title></title><script src="js/jquery.min.js"></script></head><style>* {padding: 0;margin: 0;}html,body {height: 100%;padding: 0;margin: 0;background: #000;}.aa {position: fixed;left: 50%;bottom: 10px;color: #ccc;}.img {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);width: 440px;height: 430px;}.container {width: 100%;height: 100%;}canvas {z-index: 99;position: absolute;width: 100%;height: 100%;}</style><body><!-- 樱花 --><div id="jsi-cherry-container" class="container"><audio autoplay="autopaly"><source src="renxi.mp3" type="audio/mp3" /></audio><img class="img" src="./123.png" alt="" /><!-- 爱心 --><canvas id="pinkboard" class="container"> </canvas></div><script>/** Settings*/var settings = {particles: {length: 500, // maximum amount of particlesduration: 2, // particle duration in secvelocity: 100, // particle velocity in pixels/seceffect: -0.75, // play with this for a nice effectsize: 30, // particle size in pixels},};/** RequestAnimationFrame polyfill by Erik M?ller*/(function () {var b = 0;var c = ["ms", "moz", "webkit", "o"];for (var a = 0; a < c.length && !window.requestAnimationFrame; ++a) {window.requestAnimationFrame = window[c[a] + "RequestAnimationFrame"];window.cancelAnimationFrame =window[c[a] + "CancelAnimationFrame"] ||window[c[a] + "CancelRequestAnimationFrame"];}if (!window.requestAnimationFrame) {window.requestAnimationFrame = function (h, e) {var d = new Date().getTime();var f = Math.max(0, 16 - (d - b));var g = window.setTimeout(function () {h(d + f);}, f);b = d + f;return g;};}if (!window.cancelAnimationFrame) {window.cancelAnimationFrame = function (d) {clearTimeout(d);};}})();/** Point class*/var Point = (function () {function Point(x, y) {this.x = typeof x !== "undefined" ? x : 0;this.y = typeof y !== "undefined" ? y : 0;}Point.prototype.clone = function () {return new Point(this.x, this.y);};Point.prototype.length = function (length) {if (typeof length == "undefined")return Math.sqrt(this.x * this.x + this.y * this.y);this.normalize();this.x *= length;this.y *= length;return this;};Point.prototype.normalize = function () {var length = this.length();this.x /= length;this.y /= length;return this;};return Point;})();/** Particle class*/var Particle = (function () {function Particle() {this.position = new Point();this.velocity = new Point();this.acceleration = new Point();this.age = 0;}Particle.prototype.initialize = function (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;};Particle.prototype.update = function (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;};Particle.prototype.draw = function (context, image) {function ease(t) {return --t * t * t + 1;}var 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);};return Particle;})();/** ParticlePool class*/var ParticlePool = (function () {var particles,firstActive = 0,firstFree = 0,duration = settings.particles.duration;function ParticlePool(length) {// create and populate particle poolparticles = new Array(length);for (var i = 0; i < particles.length; i++)particles[i] = new Particle();}ParticlePool.prototype.add = function (x, y, dx, dy) {particles[firstFree].initialize(x, y, dx, dy);// handle circular queuefirstFree++;if (firstFree == particles.length) firstFree = 0;if (firstActive == firstFree) firstActive++;if (firstActive == particles.length) firstActive = 0;};ParticlePool.prototype.update = function (deltaTime) {var i;// update active particlesif (firstActive < firstFree) {for (i = firstActive; i < firstFree; i++)particles[i].update(deltaTime);}if (firstFree < firstActive) {for (i = firstActive; i < particles.length; i++)particles[i].update(deltaTime);for (i = 0; i < firstFree; i++) particles[i].update(deltaTime);}// remove inactive particleswhile (particles[firstActive].age >= duration &&firstActive != firstFree) {firstActive++;if (firstActive == particles.length) firstActive = 0;}};ParticlePool.prototype.draw = function (context, image) {// draw active particlesif (firstActive < firstFree) {for (i = firstActive; i < firstFree; i++)particles[i].draw(context, image);}if (firstFree < firstActive) {for (i = firstActive; i < particles.length; i++)particles[i].draw(context, image);for (i = 0; i < firstFree; i++) particles[i].draw(context, image);}};return ParticlePool;})();/** Putting it all together*/(function (canvas) {var context = canvas.getContext("2d"),particles = new ParticlePool(settings.particles.length),particleRate =settings.particles.length / settings.particles.duration, // particles/sectime;// get point on heart with -PI <= t <= PIfunction 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);}// creating the particle image using a dummy canvasvar image = (function () {var canvas = document.createElement("canvas"),context = canvas.getContext("2d");canvas.width = settings.particles.size;canvas.height = settings.particles.size;// helper function to create the pathfunction to(t) {var 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;}// create the pathcontext.beginPath();var t = -Math.PI;var point = to(t);context.moveTo(point.x, point.y);while (t < Math.PI) {t += 0.01; // baby steps!point = to(t);context.lineTo(point.x, point.y);}context.closePath();// create the fillcontext.fillStyle = "#ea80b0";context.fill();// create the imagevar image = new Image();image.src = canvas.toDataURL();return image;})();// render that thing!function render() {// next animation framerequestAnimationFrame(render);// update timevar newTime = new Date().getTime() / 1000,deltaTime = newTime - (time || newTime);time = newTime;// clear canvascontext.clearRect(0, 0, canvas.width, canvas.height);// create new particlesvar amount = particleRate * deltaTime;for (var i = 0; i < amount; i++) {var pos = pointOnHeart(Math.PI - 2 * Math.PI * Math.random());var dir = pos.clone().length(settings.particles.velocity);particles.add(canvas.width / 2 + pos.x,canvas.height / 2 - pos.y,dir.x,-dir.y);}// update and draw particlesparticles.update(deltaTime);particles.draw(context, image);}// handle (re-)sizing of the canvasfunction onResize() {canvas.width = canvas.clientWidth;canvas.height = canvas.clientHeight;}window.onresize = onResize;// delay rendering bootstrapsetTimeout(function () {onResize();render();}, 10);})(document.getElementById("pinkboard"));</script><script>var RENDERER = {INIT_CHERRY_BLOSSOM_COUNT: 30,MAX_ADDING_INTERVAL: 10,init: function () {this.setParameters();this.reconstructMethods();this.createCherries();this.render();if (navigator.userAgent.match(/(phone|pod|iPhone|iPod|ios|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)) {// var box = document.querySelectorAll(".box")[0];// console.log(box, "移动端");// box.style.marginTop = "65%";}},setParameters: function () {this.$container = $("#jsi-cherry-container");this.width = this.$container.width();this.height = this.$container.height();this.context = $("<canvas />").attr({ width: this.width, height: this.height }).appendTo(this.$container).get(0).getContext("2d");this.cherries = [];this.maxAddingInterval = Math.round((this.MAX_ADDING_INTERVAL * 1000) / this.width);this.addingInterval = this.maxAddingInterval;},reconstructMethods: function () {this.render = this.render.bind(this);},createCherries: function () {for (var i = 0,length = Math.round((this.INIT_CHERRY_BLOSSOM_COUNT * this.width) / 1000);i < length;i++) {this.cherries.push(new CHERRY_BLOSSOM(this, true));}},render: function () {requestAnimationFrame(this.render);this.context.clearRect(0, 0, this.width, this.height);this.cherries.sort(function (cherry1, cherry2) {return cherry1.z - cherry2.z;});for (var i = this.cherries.length - 1; i >= 0; i--) {if (!this.cherries[i].render(this.context)) {this.cherries.splice(i, 1);}}if (--this.addingInterval == 0) {this.addingInterval = this.maxAddingInterval;this.cherries.push(new CHERRY_BLOSSOM(this, false));}},};var CHERRY_BLOSSOM = function (renderer, isRandom) {this.renderer = renderer;this.init(isRandom);};CHERRY_BLOSSOM.prototype = {FOCUS_POSITION: 300,FAR_LIMIT: 600,MAX_RIPPLE_COUNT: 100,RIPPLE_RADIUS: 100,SURFACE_RATE: 0.5,SINK_OFFSET: 20,init: function (isRandom) {this.x = this.getRandomValue(-this.renderer.width,this.renderer.width);this.y = isRandom? this.getRandomValue(0, this.renderer.height): this.renderer.height * 1.5;this.z = this.getRandomValue(0, this.FAR_LIMIT);this.vx = this.getRandomValue(-2, 2);this.vy = -2;this.theta = this.getRandomValue(0, Math.PI * 2);this.phi = this.getRandomValue(0, Math.PI * 2);this.psi = 0;this.dpsi = this.getRandomValue(Math.PI / 600, Math.PI / 300);this.opacity = 0;this.endTheta = false;this.endPhi = false;this.rippleCount = 0;var axis = this.getAxis(),theta =this.theta +(Math.ceil(-(this.y + this.renderer.height * this.SURFACE_RATE) / this.vy) *Math.PI) /500;theta %= Math.PI * 2;this.offsetY =40 * (theta <= Math.PI / 2 || theta >= (Math.PI * 3) / 2 ? -1 : 1);this.thresholdY =this.renderer.height / 2 +this.rend);},getRandomValue: function (min, max) {return min + (max - min) * Math.random();},getAxis: function () {var rate = this.FOCUS_POSITION / (this.z + this.FOCUS_POSITION),x = this.renderer.width / 2 + this.x * rate,y = this.renderer.height / 2 - this.y * rate;return { rate: rate, x: x, y: y };},renderCherry: function (context, axis) {context.beginPath();context.moveTo(0, 40);context.bezierCurveTo(-60, 20, -10, -60, 0, -20);context.bezierCurveTo(10, -60, 60, 20, 0, 40);context.fill();for (var i = -4; i < 4; i++) {context.beginPath();context.moveTo(0, 40);context.quadraticCurveTo(i * 12, 10, i * 4, -24 + Math.abs(i) * 2);context.stroke();}},render: function (context) {var axis = this.getAxis();if (axis.y == this.thresholdY &&this.rippleCount < this.MAX_RIPPLE_COUNT) {context.save();context.lineWidth = 2;context.strokeStyle ="hsla(0, 0%, 100%, " +(this.MAX_RIPPLE_COUNT - this.rippleCount) /this.MAX_RIPPLE_COUNT +")";}return (this.z > -this.FOCUS_POSITION &&this.z < this.FAR_LIMIT &&this.x < this.renderer.width * 1.5);},};$(function () {RENDERER.init();});</script></body>
</html>

五、🎁更多源码

1.如果我的博客对你有帮助 请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦!

2.💗【👇🏻👇🏻👇🏻🉑关注我| 获取更多源码】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、等!

📣以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/10510.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

520到了,用Python给女朋友比心表白

每到各种节日&#xff0c;不少小伙伴们都会遇到这样一个世纪问题——怎么给女朋友/老婆一个与众不同的节日惊喜。 这不又要到520了嘛&#xff0c;我们可以尝试用python给女朋友比心表白&#xff01;就像下面这样???? 下面快快就带大家来领略一下用Python表白的方式&#xf…

教你如何制作浪漫的表白网站

底部有彩蛋&#xff0c;不要错过(๑╹◡╹)&#xff89;""" #前言 前不久是情人节&#xff0c;一些小伙伴向我请求网页表白的教程&#xff0c;但因为比较忙&#xff0c;所以教程一直迟迟没有出来&#xff0c;趁着今天的闲暇时光&#xff0c;我把教程写出来。 虽…

【男生女生表白攻略】手把手教你制作有创意的表白软件

总有那么一个人让你脸红心跳&#xff0c;爱了却不敢说出来&#xff0c;真可惜。 那怎样才能向Ta表达自己真实的心情&#xff0c;怎样才能有机会追求自己所爱。必要的时候来学一些小技巧帮你爱情大作战。今天就跟大家介绍一个新颖有创意的表白方式&#xff0c;最适合不敢表白的人…

Python让女生无法拒绝的表白源代码

Python让女生无法拒绝的表白源代码&#xff0c;该程序在不接受表白时无法退出窗口&#xff0c;无法通过表白窗口的叉或程序内不接受按钮退出&#xff0c;需最大化表白窗口并点接受表白&#xff0c;方可退出。需要表白女生的图片可进行替换&#xff0c;图片也主程序放置在同一目…

明天就是5.20,这几个c语言表白代码发给你喜欢的女生,要是还没有女朋友直接来找我!!!

转眼间&#xff0c;今天好像已经2021年5月19日&#xff0c;明天好像是5月20号哎&#xff01;&#x1f614; 没想到吧&#xff01;一年一度的5.20它又来了。 又&#xff0c;又又又又又又来了&#xff01; 它踩着单生狗的身体&#xff0c;贱贱的向我们走来。&#x1f631; 是不…

520创意表白网站,让女友对你死心塌地。女神轻松领回家

可能很多女生都会觉得程序员都是直男&#xff0c;不懂浪漫。但是&#xff01;&#xff01;&#xff01;看完这个教程之后&#xff0c;让女友对你死心塌地。 这是一个基于js和html搭建的简单界面&#xff0c;你只需要把代码下载下来&#xff0c;然后再简单的改一下代码信息&…

HTML可用于情侣表白的爱心代码~,赶紧跟着操作,让她也拥有属于你的爱心吧。

文章目录 前言一、效果图二、操作步骤第一步第二步第三步第四步第五步第六步 源码 前言 最近随着电视剧《点燃我温暖你》的火热播出&#xff0c;剧中帅气学霸李洵的炫酷爱心代码也迅速火出了圈&#xff0c;爱心素材也异常火爆&#xff0c;我在这里整理了一份大家有需自取哦~ 可…

【七】springboot启动源码 - finishBeanFactoryInitialization

finishBeanFactoryInitialization 源码解析 Instantiate all remaining (non-lazy-init) singletons. 初始化剩下非懒加载的实例对象 finishBeanFactoryInitialization方法第918行&#xff0c;beanFactory.preInstantiateSingletons(); preInstantiateSingletons方法&#xff…

AI工程化实践-如何构造一个AI应用

最近大模型非常火爆&#xff0c;基于大模型的应用也层出不穷&#xff0c;比较火的比如AutoGPT&#xff0c;当然也有很多垂直领域的应用。那么如何基于大模型的能力快速的建设一个垂直领域的AI应用呢&#xff0c;这就涉及到了AI工程化建设。在整个AI工程化建设的过程中&#xff…

vue3的响应式赋值中数组array,对象object,集合set的重新赋值怎么操作,问过Chatgpt的答案

vue3和ts结合开发的时候&#xff0c;总是会遇到引用数据类型的重新赋值的情况&#xff0c;但是在vue3中&#xff0c;又不能使用直接赋值的情况&#xff0c;因为会改变proxy的结构&#xff0c;导致响应式失败&#xff0c;那么该如何重新赋值响应式对象数据成为了一个技巧问题&am…

使用gpt的感受,结尾附注册使用方式

最近一直很火的chatgpt&#xff0c;我也去试了一下&#xff0c;感觉还是用的很舒服的。 优点 感觉舒服的地方就是可以联系上下文&#xff0c;不像传统的搜索引擎一样&#xff0c;找不到的话得重新组织语言去搜索&#xff0c;可以跟gpt学习英语&#xff0c;问编程问题&#xf…

GIT使用的问题及解决

随时遇见&#xff0c;随机解决&#xff0c;同步记录 ~ 文章目录 ① git commit 失败&#xff1a;Author identity unknown *** Please tell me who you are.② git clone&#xff0c;git pull 提示 Permission denied&#xff0c;找不到私钥文件③ 重启电脑后&#xff0c;使用 …

解决Microsoft Bing 支持 ChatGPT后加入等待队列出错问题

解决Microsoft Bing 支持 ChatGPT后加入候补名单出错问题 代理进入https://www.bing.com/new&#xff0c;正确界面如下图&#xff1a; 如果进入直接跳转下图界面&#xff0c;则需要清除与bing相关的cookie&#xff08;设置里清除&#xff0c;这样就能之间跳转到加入候补名单的…

反射和动态代理

目录 v20230514更新 Userjava反射本质 反射的核心 获取Class对象&#xff1a; 创建对象&#xff1a; 调用方法&#xff1a; 访问字段&#xff1a; 需要注意的是&#xff0c; 综上所述&#xff0c; Userjava动态代理本质 两个核心的类&#xff1a;Proxy和InvocationH…

ChatGPT还在2G冲浪?新模型「youChat」:我已能够解说2022世界杯

视学算法报道 编辑&#xff1a;蛋酱、小舟 youChat 能成为搜索引擎变革的先行者吗&#xff1f; ChatGPT 自推出以来就被寄予厚望&#xff0c;一些人认为它会取代搜索引擎&#xff0c;成为「改变游戏规则的人」。 真的会有这一天吗&#xff1f;至少&#xff0c;一部分业内人士已…

流浪气球?ChatGPT这样回答,我惊了

近日&#xff0c;流浪地球电影反响热烈&#xff0c;“流浪气球”事件讨论热火&#xff0c;连人工智能ChatGPT都发表了 “自己”的看法&#xff0c;到底是怎么一回事呢&#xff1f;起因是我国一只民用气球&#xff0c;因技术和天气原因不小心飘到了米国上空&#xff0c;对方当时…

chatgpt赋能python:Python收发短信:简单可靠的解决方案

Python收发短信&#xff1a;简单可靠的解决方案 如果您需要向客户发送定期提醒或通知的短信&#xff0c;则 Python 是一种简单易用的解决方案。在本文中&#xff0c;我们将介绍如何使用 Python 发送和接收短信&#xff0c;并探讨一些流行的短信 API。 什么是短信 API&#xf…

chatgpt赋能python:Python编程——创新发短信新方式

Python编程——创新发短信新方式 在现代社会&#xff0c;短信是一种非常实用的通讯方式&#xff0c;广泛应用于各种场合。在Python编程领域中&#xff0c;通过利用各种API&#xff0c;我们能够创新地发短信并满足不同场景使用需求。本篇文章将介绍在Python编程中实现发短信的基…

chatgpt赋能python:Python短信发送:简单快捷的商业应用方式

Python短信发送&#xff1a;简单快捷的商业应用方式 介绍 随着科技的不断发展&#xff0c;短信已经成为商业沟通的重要渠道之一。许多业务场景需要使用短信进行客户沟通&#xff0c;例如短信验证码、促销短信、物流短信等等。 Python作为一种高效的编程语言&#xff0c;在短…

chatgpt赋能python:如何利用Python拦截短信验证码

如何利用Python拦截短信验证码 短信验证是现代互联网应用程序中最普遍的安全措施之一。然而&#xff0c;有些黑客试图入侵用户账户&#xff0c;通过拦截其短信验证码来获得访问权限。这可能会导致灾难性的后果&#xff0c;包括数据泄露和财务损失。 幸运的是&#xff0c;Pyth…