HTML5七夕情人节表白网页(幻化3D相册) HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码 css爱心表白
HTML5七夕情人节表白网页❤幻化3D相册❤ HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码 css爱心表白
这是程序员表白系列中的100款网站表白之一，旨在让任何人都能使用并创建自己的表白网站给心爱的人看。 此波共有100个表白网站，可以任意修改和使用，源码已上传，演示网址如下。
文章末尾-已经附上源码下载地址
作者主页-更多源码
100款七夕情人节告白源码-专栏文章
作品介绍
1.网页作品简介 ：基于 HTML+CSS+JavaScript 制作七夕情人节表白网页, 生日祝福, 七夕告白, 求婚, 浪漫爱情3D相册,炫酷代码 ,已经兼容手机端和电脑端, 快来制作一款高端的表白网页送(他/她)生日祝福网页,制作修改简单, 需替换图片和文字即可.可自行更换背景音乐。
2.网页作品编辑：任意HTML编辑软件（如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++ ）均可修改网页。
文章目录
- HTML5七夕情人节表白网页❤幻化3D相册❤ HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码 css爱心表白
- 作品介绍
- 一、作品展示
- 二、文件目录
- 三、代码实现
- 四、学习资料
- 五、源码下载
- 六、更多源码
一、作品展示
二、文件目录
三、代码实现
<html>
<head>
<meta charset="utf-8" />
<link type="text/css" href="./css/style.css" rel="stylesheet" />
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js">script>
<style type="text/css">
/* body {
background: #000;
position: relative;
} */
html,
body {
position: relative;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
.container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
z-index: 9999 !important;
}
#music {
z-index: 999999 !important;
position: fixed;
top: 0;
left: 0;
}
.canvas {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
}
#wrapper {
display: flex;
height: 100vh;
width: 100vw;
}
.content {
background: rgba(0, 0, 0, 0.8);
color: #f4f4f4;
height: 200px;
margin: auto;
padding: 2rem;
position: relative;
overflow: hidden;
width: 400px;
z-index: 1;
}
a {
color: #999;
}
style>
head>
<body>
<div id="wrapper">
<audio
src="sd.mp3"
controls="controls"
autoplay="autoplay"
loop="loop"
id="music"
>audio>
<div id="jsi-snow-container" class="container">div>
<div class="box">
<ul class="minbox">
<li>li>
<li>li>
<li>li>
<li>li>
<li>li>
<li>li>
ul>
<ol class="maxbox">
<li>li>
<li>li>
<li>li>
<li>li>
<li>li>
<li>li>
ol>
div>
div>
body>
<script>
"use strict";
var parentEl;
var c1;
var c2;
var ctx1;
var ctx2;
var canvasWidth;
var canvasHeight;
var sizeBase;
var count;
var hue;
var options;
var parts = [];
/**
* Helper function to create a HTML5 canvas and add a class to it
* @return {[canvas]}
*/
function createCanvas() {
var canvas = document.createElement("canvas");
canvas.classList.add("canvas");
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];
box.style.left = "-42%";
}
return canvas;
}
/**
* Helper function to generate a random value between min and max
* @param {[int]} min [min value]
* @param {[int]} max [max value]
* @return {[int]} [random value between min and max]
*/
function rand(min, max) {
return Math.random() * (max - min) + min;
}
/**
* Helper function to generate hsla string for canvas 2d context
* @param {[int]} h [hue]
* @param {[int]} s [saturation]
* @param {[int]} l [lightness]
* @param {[float]} a [alpha]
* @return {[string]}
*/
function hsla(h, s, l, a) {
return "hsla(" + h + "," + s + "%," + l + "%," + a + ")";
}
/**
* Helper function used for debouncing
* @param {[Function]} fn [function to debounce]
* @param {[int]} delay [debounce delay]
*/
function debounce(fn, delay) {
var timer = null;
return function () {
var context = this;
var args = arguments;
clearTimeout(timer);
timer = setTimeout(function () {
fn.apply(context, args);
}, delay);
};
}
function createAnimation() {
sizeBase = canvasWidth + canvasHeight;
count = Math.floor(sizeBase * 0.3);
hue = rand(0, 360);
options = {
radiusMin: 1,
radiusMax: sizeBase * 0.04,
blurMin: 10,
blurMax: sizeBase * 0.04,
hueMin: hue,
hueMax: hue + 100,
saturationMin: 10,
saturationMax: 70,
lightnessMin: 20,
lightnessMax: 50,
alphaMin: 0.1,
alphaMax: 0.5,
};
ctx1.clearRect(0, 0, canvasWidth, canvasHeight);
ctx1.globalCompositeOperation = "lighter";
while (count--) {
//init variables for canvas context
var radius = rand(options.radiusMin, options.radiusMax);
var blur = rand(options.blurMin, options.blurMax);
var x = rand(0, canvasWidth);
var y = rand(0, canvasHeight);
var hue = rand(options.hueMin, options.hueMax);
var saturation = rand(options.saturationMin, options.saturationMax);
var lightness = rand(options.lightnessMin, options.lightnessMax);
var alpha = rand(options.alphaMin, options.alphaMax);
//draw on canvas context
ctx1.shadowColor = hsla(hue, saturation, lightness, alpha);
ctx1.shadowBlur = blur;
ctx1.beginPath();
ctx1.arc(x, y, radius, 0, Math.PI * 2);
ctx1.closePath();
ctx1.fill();
}
parts.length = 0; //clear parts array
for (
var i = 0;
i < Math.floor((canvasWidth + canvasHeight) * 0.03);
i++
) {
parts.push({
radius: rand(1, sizeBase * 0.03),
x: rand(0, canvasWidth),
y: rand(0, canvasHeight),
angle: rand(0, Math.PI * 2),
vel: rand(0.1, 0.5),
tick: rand(0, 10000),
});
}
}
function resize() {
canvasWidth = c1.width = c2.width = parentEl.offsetWidth;
canvasHeight = c1.height = c2.height = parentEl.offsetHeight;
}
function animate() {
window.requestAnimationFrame(animate);
ctx2.clearRect(0, 0, canvasWidth, canvasHeight);
ctx2.globalCompositeOperation = "source-over";
ctx2.shadowBlur = 0;
ctx2.drawImage(c1, 0, 0); //copy canvas 1 to canvas 2
ctx2.globalCompositeOperation = "lighter";
var i = parts.length;
ctx2.shadowBlur = 15;
ctx2.shadowColor = "#fff";
while (i--) {
var part = parts[i];
part.x += Math.cos(part.angle) * part.vel;
part.y += Math.sin(part.angle) * part.vel;
part.angle += rand(-0.05, 0.05);
ctx2.beginPath();
ctx2.arc(part.x, part.y, part.radius, 0, Math.PI * 2);
var alpha = 0.075 + Math.cos(part.tick * 0.02) * 0.05;
ctx2.fillStyle = hsla(0, 0, 100, alpha);
ctx2.fill();
//make sure particles stay within canvas bounds
if (part.x - part.radius > canvasWidth) {
part.x = -part.radius;
}
if (part.x + part.radius < 0) {
part.x = canvasWidth + part.radius;
}
if (part.y - part.radius > canvasHeight) {
part.y = -part.radius;
}
if (part.y + part.radius < 0) {
part.y = canvasHeight + part.radius;
}
part.tick++;
}
}
function init() {
//create canvases
c1 = createCanvas();
c2 = createCanvas();
ctx1 = c1.getContext("2d");
ctx2 = c2.getContext("2d");
parentEl = document.getElementById("wrapper");
parentEl.insertBefore(c2, parentEl.firstChild);
parentEl.insertBefore(c1, c2);
resize();
createAnimation();
animate();
window.addEventListener(
"resize",
debounce(function () {
resize();
createAnimation();
}, 250)
);
}
init();
script>
html>
四、学习资料
web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站
五、源码下载
【百度网盘-完整源码下载地址↓】
链接：点我下载源码 https://pan.baidu.com/s/1UdFzRE6mEKC5D1xALTMbYw
提取码：8888
六、更多源码
❤100款表白网页演示地址
❤100款表白网页在线视频演示