HTML5浪漫生日祝愿电子贺卡网页模板（HTML5+CSS3+JS）_520剖明_七夕恋人节剖明_告白网页造做_生日快乐html模板
html+css+js实现生日快乐代码 超炫酷效果 (含生日布景音乐)❤520/剖明/七夕恋人节/求婚❤公用炫酷动画网页的源代码
法式员恋爱❤520/剖明/七夕恋人节/求婚❤公用html5+css3+js 生日快乐网站模板 HTML生日快乐祝愿网页模板，该模板有多种动态效果图，全局接纳蓝色粉饰，适用于给女伴侣的生日祝愿，只需简单修改，即可用网页生成翻开。html+css+js实现生日快乐代码 超炫酷效果 (含生日布景音乐)❤520/剖明/七夕恋人节/求婚❤公用炫酷动画网页的源代码
戳下方链接↓查看线上演示地址 1.生日快乐 (多页面html模板)★在线演示地址:https://ruanjiafeng2013.gitee.io/happy-birthday-template 2.生日蛋糕 ★在线演示地址:https://ruanjiafeng2013.gitee.io/birthday-cake 3.(生日快乐)蛋糕烟花+蓝色梦幻海洋3D相册 ★在线演示地址: https://ruanjiafeng2013.gitee.io/birthday-cake520/ 动态效果演示
HTML5庆贺生日蛋糕烟花特效
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>造做一个法式员的生日快乐代码</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/style11.css">
<link rel="stylesheet" href="css/yanhua.css">
<link rel="stylesheet" href="css/style2D.css">
</head>
<body>
<marquee style="position: fixed; top: 10px; color: #fff" scrollamount="10">Happy birthday! 生日快乐！</marquee>
<marquee style="position: fixed; top: 20px; color: #ffd800" scrollamount="3">祝你生日快乐，天天高兴！</marquee>
<marquee style="position: fixed; top: 50px; color: #00ff90" scrollamount="5">祝你生日快乐，没有懊恼！</marquee>
<marquee style="position: fixed; top: 50px; color: #00ff90" scrollamount="5">祝你生日快乐，没有懊恼！</marquee>
<marquee style="position: fixed; top: 50px; color: #00ff90" scrollamount="5">祝你生日快乐，没有懊恼！</marquee>
<marquee style="position: fixed; top: 50px; color: #00ff90" scrollamount="5">祝你生日快乐，没有懊恼！</marquee>
<marquee style="position: fixed; top: 50px; color: #00ff90" scrollamount="5">祝你生日快乐，没有懊恼！</marquee>
<marquee style="position: fixed; top: 50px; color: #00ff90" scrollamount="5">祝你生日快乐，没有懊恼！</marquee>
<main style="text-align:center;position:absolute;">
<ul class="star" style="--v: 1; --t: 1;">
<li style="--i: 0"></li>
</ul>
<ul style="--v: 2; --t: 8; --direction:reverse">
<li style="--i: 0"></li>
<li style="--i: 1"></li>
<li style="--i: 2"></li>
<li style="--i: 3"></li>
<li style="--i: 4"></li>
<li style="--i: 5"></li>
<li style="--i: 6"></li>
<li style="--i: 7"></li>
</ul>
<ul style="--v: 3; --t: 12">
<li style="--i: 0"></li>
<li style="--i: 1"></li>
<li style="--i: 2"></li>
<li style="--i: 3"></li>
<li style="--i: 4"></li>
<li style="--i: 5"></li>
<li style="--i: 6"></li>
<li style="--i: 7"></li>
<li style="--i: 8"></li>
<li style="--i: 9"></li>
<li style="--i: 10"></li>
<li style="--i: 11"></li>
</ul>
<ul style="--v: 4; --t: 18; --direction:reverse">
<li style="--i: 0"></li>
<li style="--i: 1"></li>
<li style="--i: 2"></li>
<li style="--i: 3"></li>
<li style="--i: 4"></li>
<li style="--i: 5"></li>
<li style="--i: 6"></li>
<li style="--i: 7"></li>
<li style="--i: 8"></li>
<li style="--i: 9"></li>
<li style="--i: 10"></li>
<li style="--i: 11"></li>
<li style="--i: 12"></li>
<li style="--i: 13"></li>
<li style="--i: 14"></li>
<li style="--i: 15"></li>
<li style="--i: 16"></li>
<li style="--i: 17"></li>
</ul>
</ul>
<p id="message" style="position:relative;margin-top:-40px;z-index:99999">
<img src="img/birthday.png" alt="Alternate Text" />
<br />
</p>
</main>
<div class="block-audio" style="z-index:10000;">
</div>
<canvas id="canvas"></canvas>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/index1.js"></script>
<script src="js/script.js"></script>
</body>
</html>
js代码
console.clear();
/* Play with these values! */
const PARTICLE_COUNT = 100;
const SAFE_DISTANCE = 130;
const INFECTED_DISTANCE = 15;
const INFECTION_RATE = 0.25;
const RECOVERY_TIME = 14000;
const STAY_AT_HOME = 0.1;
/* ---------------------------------- */
let particles = [];
const STATUSES = {
HEALTHY: "HEALTHY",
INFECTED: "INFECTED",
RECOVERED: "RECOVERED"
};
const elBody = document.body;
const elCanvas = document.querySelector("#canvas");
const ctx = elCanvas.getContext("2d");
let width, height;
function resize() {
width = elCanvas.width = elBody.clientWidth;
height = elCanvas.height = elBody.clientHeight;
}
resize();
window.addEventListener("resize", resize);
/* ---------------------------------- */
class Particle {
constructor() {
this.x = Math.random() * width;
this.y = Math.random() * height;
this.radius = 3;
this.color = "white";
this.speed = Math.random() < STAY_AT_HOME ? 0 : 1;
this.directionAngle = Math.floor(Math.random() * 360);
this.vector = {
x: Math.cos(this.directionAngle) * this.speed,
y: Math.sin(this.directionAngle) * this.speed
};
this.status = STATUSES.HEALTHY;
if (Math.random() < INFECTION_RATE) {
this.infect();
}
}
infect() {
if (
this.status === STATUSES.INFECTED ||
this.status === STATUSES.RECOVERED
) {
return;
}
this.color = "green";
this.status = STATUSES.INFECTED;
setTimeout(() => {
this.recover();
}, RECOVERY_TIME);
}
recover() {
this.status = STATUSES.RECOVERED;
this.color = "hotpink";
}
draw(drawCtx) {
drawCtx.beginPath();
drawCtx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
drawCtx.closePath();
drawCtx.fillStyle = this.color;
drawCtx.fill();
}
update() {
this.checkBoundaries();
this.x += this.vector.x;
this.y += this.vector.y;
}
checkBoundaries() {
if (this.x > width || this.x < 0) {
this.vector.x *= -1;
/* Ensure the dots are pushed inside */
this.x = Math.max(0, Math.min(width, this.x));
}
if (this.y > height || this.y < 0) {
this.vector.y *= -1;
/* Ensure the dots are pushed inside */
this.y = Math.max(0, Math.min(height, this.y));
}
}
}
/* ---------------------------------- */
function distance(x1, y1, x2, y2) {
var dx = x1 - x2;
var dy = y1 - y2;
return Math.sqrt(dx * dx + dy * dy);
}
function linkParticles(particle, otherParticles, drawCtx) {
for (const p of otherParticles) {
const d = distance(particle.x, particle.y, p.x, p.y);
if (d > SAFE_DISTANCE) {
continue;
}
// Infect other particle!
if (particle.status === STATUSES.INFECTED && d < INFECTED_DISTANCE) {
p.infect();
}
const opacity = 0.8 - (d / SAFE_DISTANCE) * 0.8;
drawCtx.lineWidth = 1;
drawCtx.strokeStyle = particle.color; //rgba(255,255,255,${opacity})`;
drawCtx.globalAlpha = opacity;
drawCtx.beginPath();
drawCtx.moveTo(particle.x, particle.y);
drawCtx.lineTo(p.x, p.y);
drawCtx.closePath();
drawCtx.stroke();
drawCtx.globalAlpha = 1;
}
}
做好的网页效果,若何通过发链接给他人看?
1.1处理摆设上线~> 摆设上线东西(永久免费利用)
1.不需要买办事器就能摆设线上,全世界都能拜候你的毗连啦, 那里给各人保举一个法式员必备神器~ 插件集成了超等多好用的插件，免费下载安拆，简单易懂, 几乎神器 ~ 需要可在文章 ↓ 下方公Z号获取
2.就是把你的代码效果做好了以后, 摆设到线上, 把链接发给他人, 就能够让对方通过你的毗连点击进去, 就能看到你的网页效果啦, 电脑端和手机端都能够噢! (否则他人看你的网页都要发文件过去,体验感不太好哦~)
1.1摆设流程
1.2 哇~ 摆设胜利
哇~ 摆设胜利! 将你写好的页面摆设上线后, 全世界的人都能够通过链接拜候到你的网页了(永久免费利用哦)~
前端 零根底 入门到高级 (视频+源码+开发软件+进修材料+面试题) 一整套 (教程)
合适入门到高级的童鞋们动手~
❉ 源码获取
❉ ~ 存眷我，点赞博文~ 每天带你涨常识!
❉ 1.看到那里了就 [点赞+好评+保藏] 三连 撑持下吧，你的「点赞，好评，保藏」是我创做的动力。
❉ 2.存眷我~ 每天带你进修 :各类前端插件、3D炫酷效果、图片展现、文字效果、以及整站模板 、大学生结业模板 、期末高文业模板 、等! 「在那里有好多 前端 开发者，一路切磋 前端 Node 常识，互相进修」！
❉ 3.以上内容手艺相关问题能够彼此进修，可存眷↓公Z号 获取更多源码 !
❉更多剖明源码
❤100款剖明源码演示地址
0