0
点赞
收藏
分享

微信扫一扫

程序员专属情人节表白网站(HTML+CSS+JS制作动态3D相册)


七夕来袭!是时候展现专属于程序员的浪漫了!你打算怎么给心爱的人表达爱意?鲜花礼物?代码表白?还是创意DIY?或者…无论那种形式,快来秀我们一脸吧!

📂文章目录

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

二、📚网站介绍

📒网站文件方面: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.视频演示

28-幻化3D相册html+css+js

🧩 2.图片演示

程序员专属情人节表白网站(HTML+CSS+JS制作动态3D相册)_css

四、💒 网站代码

🧱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,) {
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,) {
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,) {
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>

🏠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 {
0% {
-webkit-transform: rotateX(13deg) rotateY(0deg);
}
100% {
-webkit-transform: rotateX(13deg) rotateY(360deg);
}
}

五、🎁更多源码

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



举报

相关推荐

0 条评论