HTML5七夕情人节表白网页制作【幻化3D相册】HTML+CSS+JavaScript
【摘要】 这是程序员表白系列中的100款网站表白之一，旨在让任何人都能使用并创建自己的表白网站给心爱的人看。 此波共有100个表白网站，可以任意修改和使用，很多人会希望向心爱的男孩女孩告白，生性腼腆的人即使那个TA站在眼前都不敢向前表白。说不出口的话就用短视频告诉TA吧~制作一个表白网页告诉TA你的心意,演示如下。@TOC 一、网页介绍1 网页简介：基于 HTML+CSS+JavaScript 制作七...
这是程序员表白系列中的100款网站表白之一，旨在让任何人都能使用并创建自己的表白网站给心爱的人看。 此波共有100个表白网站，可以任意修改和使用，很多人会希望向心爱的男孩女孩告白，生性腼腆的人即使那个TA站在眼前都不敢向前表白。说不出口的话就用短视频告诉TA吧~制作一个表白网页告诉TA你的心意,演示如下。
@TOC
一、网页介绍
1 网页简介：基于 HTML+CSS+JavaScript 制作七夕情人节表白网页、生日祝福、七夕告白、 求婚、浪漫爱情3D相册、炫酷代码 ,快来制作一款高端的表白网页送(他/她)浪漫的告白,制作修改简单,可自行更换背景音乐,文字和图片即可使用
2.网页编辑：任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
一、网页效果
二、代码展示
1.HTML代码
代码如下（示例）：以下仅展示部分代码供参考~
<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">
<!-- <div class="content">
In photography, is the aesthetic quality of the blur produced in the out-of-focus parts of an image produced by a lens. Bokeh has been defined as "the way the lens renders out-of-focus points of light". Differences in lens aberrations and aperture shape
cause some lens designs to blur the image in a way that is pleasing to the eye, while others produce blurring that is unpleasant or distracting��"good" and "bad" bokeh, respectively. Bokeh occurs for parts of the scene that lie outside the
depth of field.
</div> -->
<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>
2.CSS代码
@charset "utf-8";
* {
margin: 0;
padding: 0;
}
body {
max-width: 100%;
min-width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
position: absolute;
margin-left: auto;
margin-right: auto;
}
li {
list-style: none;
}
.box {
width: 200px;
height: 200px;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
position: relative;
z-index: 999999 !important;
top: 45%;
left: -50%;
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateX(13deg);
-webkit-animation: move 5s linear infinite;
}
.minbox {
width: 100px;
height: 100px;
position: absolute;
left: 50px;
top: 30px;
-webkit-transform-style: preserve-3d;
}
.minbox li {
width: 100px;
height: 100px;
position: absolute;
left: 0;
top: 0;
}
.minbox li:nth-child(1) {
background: url(../img/01.png) no-repeat 0 0;
-webkit-transform: translateZ(50px);
}
.minbox li:nth-child(2) {
background: url(../img/02.png) no-repeat 0 0;
-webkit-transform: rotateX(180deg) translateZ(50px);
}
.minbox li:nth-child(3) {
background: url(../img/03.png) no-repeat 0 0;
-webkit-transform: rotateX(-90deg) translateZ(50px);
}
.minbox li:nth-child(4) {
background: url(../img/04.png) no-repeat 0 0;
-webkit-transform: rotateX(90deg) translateZ(50px);
}
.minbox li:nth-child(5) {
background: url(../img/05.png) no-repeat 0 0;
-webkit-transform: rotateY(-90deg) translateZ(50px);
}
.minbox li:nth-child(6) {
background: url(../img/06.png) no-repeat 0 0;
-webkit-transform: rotateY(90deg) translateZ(50px);
}
.maxbox li:nth-child(1) {
background: url(../img/1.png) no-repeat 0 0;
-webkit-transform: translateZ(50px);
}
.maxbox li:nth-child(2) {
background: url(../img/2.png) no-repeat 0 0;
-webkit-transform: translateZ(50px);
}
.maxbox li:nth-child(3) {
background: url(../img/3.png) no-repeat 0 0;
-webkit-transform: rotateX(-90deg) translateZ(50px);
}
.maxbox li:nth-child(4) {
background: url(../img/4.png) no-repeat 0 0;
-webkit-transform: rotateX(90deg) translateZ(50px);
}
.maxbox li:nth-child(5) {
background: url(../img/5.png) no-repeat 0 0;
-webkit-transform: rotateY(-90deg) translateZ(50px);
}
.maxbox li:nth-child(6) {
background: url(../img/6.png) no-repeat 0 0;
-webkit-transform: rotateY(90deg) translateZ(50px);
}
.maxbox {
width: 800px;
height: 400px;
position: absolute;
left: 0;
top: -20px;
-webkit-transform-style: preserve-3d;
}
.maxbox li {
width: 200px;
height: 200px;
background: #fff;
border: 1px solid #ccc;
position: absolute;
left: 0;
top: 0;
opacity: 0.2;
-webkit-transition: all 1s ease;
}
.maxbox li:nth-child(1) {
-webkit-transform: translateZ(100px);
}
.maxbox li:nth-child(2) {
-webkit-transform: rotateX(180deg) translateZ(100px);
}
.maxbox li:nth-child(3) {
-webkit-transform: rotateX(-90deg) translateZ(100px);
}
.maxbox li:nth-child(4) {
-webkit-transform: rotateX(90deg) translateZ(100px);
}
.maxbox li:nth-child(5) {
-webkit-transform: rotateY(-90deg) translateZ(100px);
}
.maxbox li:nth-child(6) {
-webkit-transform: rotateY(90deg) translateZ(100px);
}
.box:hover ol li:nth-child(1) {
-webkit-transform: translateZ(300px);
width: 400px;
height: 400px;
opacity: 0.8;
left: -100px;
top: -100px;
}
.box:hover ol li:nth-child(2) {
-webkit-transform: rotateX(180deg) translateZ(300px);
width: 400px;
height: 400px;
opacity: 0.8;
left: -100px;
top: -100px;
}
.box:hover ol li:nth-child(3) {
-webkit-transform: rotateX(-90deg) translateZ(300px);
width: 400px;
height: 400px;
opacity: 0.8;
left: -100px;
top: -100px;
}
.box:hover ol li:nth-child(4) {
-webkit-transform: rotateX(90deg) translateZ(300px);
width: 400px;
height: 400px;
opacity: 0.8;
left: -100px;
top: -100px;
}
.box:hover ol li:nth-child(5) {
-webkit-transform: rotateY(-90deg) translateZ(300px);
width: 400px;
height: 400px;
opacity: 0.8;
left: -100px;
top: -100px;
}
.box:hover ol li:nth-child(6) {
-webkit-transform: rotateY(90deg) translateZ(300px);
width: 400px;
height: 400px;
opacity: 0.8;
left: -100px;
top: -100px;
}
@keyframes move {
0% {
-webkit-transform: rotateX(13deg) rotateY(0deg);
}
100% {
-webkit-transform: rotateX(13deg) rotateY(360deg);
}
}
三、精彩专栏
看到这里了就 【点赞，关注，收藏】 三连 支持下吧，你的支持是我创作的动力。
💂【获取方式】
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）