HTML5七夕恋人节剖明网页🧡抖音超火的樱花雨3D相册🧡 HTML+CSS+JavaScript
HTML5七夕恋人节剖明网页 抖音超火的樱花雨3D相册 HTML+CSS+JavaScript
那是法式员剖明系列中的100款网站剖明之一，旨在让任何人都能利用并创建本身的剖明网站给亲爱的人看。 此波共有100个剖明网站，能够肆意修改和利用，源码已上传，演示网址如下。
做者主页
做品介绍1.网页做品简介 ：基于 HTML+CSS+JavaScript 造做七夕恋人节剖明网页, 生日祝愿, 七夕告白, 求婚, 浪漫恋爱3D相册,炫酷代码 ,已经兼容手机端和电脑端, 快来造做一款高端的剖明网页送(他/她)生日祝愿网页,造做修改简单, 需替代图片和文字即可.可自行改换布景音乐。
2.网页做品编纂：肆意HTML编纂软件（如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++ ）均可修改网页。
@TOC
一、做品展现 动态演示
二、文件目次
三、代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery.min.js"></script>
<link type="text/css" href="./css/style.css" rel="stylesheet" />
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
.container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: #000000;
}
</style>
</head>
<body>
<audio autoplay="autopaly">
<source src="renxi.mp3" type="audio/mp3" />
</audio>
<div id="jsi-cherry-container" class="container">
<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>
<script>
var RENDERER = {
INIT_CHERRY_BLOSSOM_COUNT: 30,
MAX_ADDING_INTERVAL: 10,
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));
}
},
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,
var axis = this.getAxis(),
);
this.shadowColor.addColorStop(
0,
hsl(330, 40%, + 30 * (0.3 + axis.rate) + %)
);
this.shadowColor.addColorStop(
0.05,
hsl(330, 40%, + 30 * (0.3 + axis.rate) + %)
);
this.shadowColor.addColorStop(
1,
hsl(330, 20%, + 40 * (0.3 + axis.rate) + %)
);
},
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 +
);
context.translate(
axis.x +
this.offsetY * axis.rate * (this.theta <= Math.PI ? -1 : 1),
axis.y
);
context.scale(1, 0.3);
context.beginPath();
context.arc(
0,
0,
(this.rippleCount / this.MAX_RIPPLE_COUNT) *
this.RIPPLE_RADIUS *
axis.rate,
0,
Math.PI * 2,
false
);
context.stroke();
context.restore();
this.rippleCount++;
}
if (axis.y < this.thresholdY || !this.endTheta || !this.endPhi) {
if (this.y <= 0) {
this.opacity = Math.min(this.opacity + 0.01, 1);
}
context.save();
context.globalAlpha = this.opacity;
context.fillStyle = this.shadowColor;
context.strokeStyle =
hsl(330, 30%, + 40 * (0.3 + axis.rate) + %);
context.translate(
axis.x,
Math.max(axis.y, this.thresholdY + this.thresholdY - axis.y)
);
context.rotate(Math.PI - this.theta);
context.scale(axis.rate * -Math.sin(this.phi), axis.rate);
context.translate(0, this.offsetY);
this.renderCherry(context, axis);
context.restore();
}
context.save();
context.fillStyle = this.entityColor;
context.strokeStyle = hsl(330, 40%, + 70 * (0.3 + axis.rate) + %);
context.translate(
axis.x,
axis.y + Math.abs(this.SINK_OFFSET * Math.sin(this.psi) * axis.rate)
);
context.rotate(this.theta);
context.scale(axis.rate * Math.sin(this.phi), axis.rate);
context.translate(0, this.offsetY);
this.renderCherry(context, axis);
context.restore();
if (this.y <= -this.renderer.height / 4) {
if (!this.endTheta) {
for (
var theta = Math.PI / 2, end = (Math.PI * 3) / 2;
theta <= end;
theta += Math.PI
) {
if (this.theta < theta && this.theta + Math.PI / 200 > theta) {
this.theta = theta;
this.endTheta = true;
break;
}
}
}
if (!this.endPhi) {
for (
var phi = Math.PI / 8, end = (Math.PI * 7) / 8;
phi <= end;
phi += (Math.PI * 3) / 4
) {
if (this.phi < phi && this.phi + Math.PI / 200 > phi) {
this.phi = Math.PI / 8;
this.endPhi = true;
break;
}
}
}
}
return (
this.z > -this.FOCUS_POSITION &&
this.z < this.FAR_LIMIT &&
this.x < this.renderer.width * 1.5
);
}
};
$(function() {
RENDERER.init();
});
</script>
</body>
</html>
四、进修材料
web前端 零根底-入门到高级 (视频+源码+开发软件+进修材料+面试题) 一整套 (教程) 合适入门到高级的童鞋们动手~送1000套HTML+CSS+JavaScript模板网站
五、源码下载
【百度网盘-完好源码下载地址↓】
链接：https://pan.baidu.com/s/1UdFzRE6mEKC5D1xALTMbYw 提取码：8888
六、更多源码今天你更大！送上我的爱！！内容是法式员剖明的一种高峻上的体例，用本身的专业手艺来给本身亲爱的阿谁人，留一份美妙。用代码爱表达我对你的爱
「七夕剖明网页造做01」HTML+CSS+JS樱花雨3D相册-CSDN曲播live.csdn.net/v/177682
0