HTML5七夕情人节表白网页❤生日快乐粒子烟花(自定义文字)❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 抖音3D旋转相册 js烟花代码 css爱心表白
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看。 此波共有100个表白网站,可以任意修改和使用,源码已上传,演示网址如下。
🧡文章末尾-已经附上源码下载地址
作品介绍
1.网页作品简介
:基于 HTML+CSS+JavaScript 制作七夕情人节表白网页, 生日祝福, 七夕告白, 求婚, 浪漫爱情3D相册,炫酷代码
,已经兼容手机端和电脑端, 快来制作一款高端的表白网页送(他/她)生日祝福网页,制作修改简单, 需替换图片和文字即可.可自行更换背景音乐。
2.网页作品编辑
:任意HTML编辑软件(如:DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++
)均可修改网页。
文章目录
一、作品展示
二、文件目录
三、代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
</head>
<style type="text/css">
body,
html {
margin: 0;
width: 100%;
overflow: hidden;
background: #000000;
}
canvas {
position: absolute;
width: 100%;
}
.control {
position: absolute;
}
.control input {
border: 0;
margin: 0;
padding: 15px;
outline: none;
text-align: center;
}
.control button {
border: 0;
margin: 0;
padding: 15px;
outline: none;
background: #333;
color: #fff;
}
.control button:focus,
.control button:hover {
background: #222;
}
</style>
<script
src="js/jquery.min.js"
type="text/javascript"
charset="utf-8"
></script>
<body>
<div class="control" style="position: absolute"></div>
</body>
<script type="text/javascript">
var can = document.createElement("canvas");
document.body.appendChild(can);
var ctx = can.getContext("2d");
var Fireworks = function () {
var self = this;
var rand = function (rMi, rMa) {
return ~~(Math.random() * (rMa - rMi + 1) + rMi);
};
var hitTest = function (x1, y1, w1, h1, x2, y2, w2, h2) {
return !(x1 + w1 < x2 || x2 + w2 < x1 || y1 + h1 < y2 || y2 + h2 < y1);
};
self.init = function () {
self.canvas = document.createElement("canvas");
self.canvas.width = self.cw = $(window).innerWidth();
self.canvas.height = self.ch = $(window).innerHeight();
self.particles = [];
self.partCount = 150;
self.fireworks = [];
self.mx = self.cw / 2;
self.my = self.ch / 2;
self.currentHue = 30;
self.partSpeed = 5;
self.partSpeedVariance = 10;
self.partWind = 50;
self.partFriction = 5;
self.partGravity = 1;
self.hueMin = 0;
self.hueMax = 360;
self.fworkSpeed = 4;
self