html+css+javaScript实现炫丽烟花告白（云状粒子文字3D动画手动切换，支持自定义文字动画切换效果）/程序员告白必备
每年一度/520情人节/七夕情人节/生日礼物/表白兄弟/圣诞节/元旦除夕/程序员表白，
谁说我们程序员不甜，520情人节马上就要到了。 当你正在烦恼该给女同事买什么礼物时，不妨花点时间给她送一份不一样的礼物。 更能体现你的诚意，何乐而不为呢？
基于Canvas在Web后端实现的烟花告白特效是基于对Canvas的理解来实现的。 总会有这样一个小小的惊喜，能够震撼彼此的短暂岁月。
文章目录
前言
canvas实现的颗粒状烟花文字效果，白云般的颗粒文字3D动画手动切换，支持自定义各种文字和文字的动画切换效果
1.（PC端Fireworks）效果演示
1.烟花表演地址：
2. 包括开场白+表白烟花表演致辞
1.（H5手机烟花）效果演示
代码文件目录
1.代码实现html（部分）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link rel="stylesheet" href="css/style.css">
<script id="jqbb" src="https://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<style>
body{margin:0;padding:0;overflow: hidden;} .city{width:100%;position:fixed;bottom:
0px;z-index: 100;} .city img{width: 100%;}
audio{
opacity: 0;
}
</style>
<title>
炫酷烟花表白
</title>
<link href="modal.css" rel="stylesheet"/>
<style type="text/css">
html,
body {
background-color: black;
overflow: hidden;
user-select: none;
margin: 0;
}
</style>
</head>
<body onselectstart="return false">
<div class="star comet"></div>
<script src="js/index.js"></script>
<div class="share_img"><img src="img/xin.png" alt=""></div>
<div class="page_one">
<div class="content">
<div class="text_wrapper">
<img class="xin" src="img/xin.png" alt="" />
<div class="text">
小姐姐，我好喜欢你，你愿意做我女朋友吗？
</div>
</div>
</div>
<div class="btn-groups">
<div class="heart-btn">
<div id="yes" class="btn btn-a"><span>愿意</span></div>
</div>
<div id="no" class="btn btn-b"><span>不愿意</span></div>
</div>
</div>
<div class="city">
<img src="img/city.png" alt="" />
</div>
<img src="img/moon.png" alt="" id="moon" style="visibility: hidden;" />
<div style="display:none">
<div class="shape">
520❤
</div>
<div class="shape">
这里自定义文字
</div>
<div class="shape">
茫茫人海
</div>
<div class="shape">
相遇是缘
</div>
<div class="shape">
我爱你直到永远
</div>
</div>
<audio autoplay loop id="music">
<source src="mp3/music.mp3" />
</audio>
<iframe id="iframMusic" allow="autoplay" style="display:none" src="mp3/blank.mp3"></iframe>
<script src="jquery.min.js"></script>
<script src="fire.js"></script>
<script src="talk.js"></script>
</body>
</html>
js（部分）
var canvas = document.getElementById("cas");
var ocas = document.createElement("canvas");
var octx = ocas.getContext("2d");
var ctx = canvas.getContext("2d");
ocas.width = canvas.width = window.innerWidth;
ocas.height = canvas.height = window.innerHeight;
var bigbooms = [];
// window.onload = function() {
// initAnimate();
// };
document.getElementById("iframMusic").onload = function(){
var music = document.getElementById("music");
music.src = 'music.mp3';
music.oncanplay = function(){
music.play();
};
};
function initAnimate() {
drawBg();
lastTime = new Date();
animate()
}
var lastTime;
function drawMoon() {
var moon = document.getElementById("moon");
var centerX = canvas.width - 200,
centerY = 100,
width = 80;
if (moon.complete) {
ctx.drawImage(moon, centerX, centerY, width, width)
} else {
moon.onload = function() {
ctx.drawImage(moon, centerX, centerY, width, width)
}
}
var index = 0;
for (var i = 0; i < 10; i++) {
ctx.save();
ctx.beginPath();
ctx.arc(centerX + width / 2, centerY + width / 2, width / 2 + index, 0, 2 * Math.PI);
ctx.fillStyle = "rgba(240,219,120,0.005)";
index += 2;
ctx.fill();
ctx.restore()
}
}
Array.prototype.foreach = function(callback) {
for (var i = 0; i < this.length; i++) {
if (this[i] !== null) {
callback.apply(this[i], [i])
}
}
};
var raf = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60)
};
};
CSS（部分）
/* 愿意 */
.btn-a {
background: pink;
}
.btn-b {
background: #c9c9c9;
}
.btn-b:after {
content: "";
position: absolute;
display: block;
width: 60px;
height: 30px;
background: #c9c9c9;
left: 0;
top: -29px;
border-top-left-radius: 60px;
border-top-right-radius: 60px;
}
.container {
}
.container .mask {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3);
}
.container .modal {
width: 50%;
height: 160px;
position: absolute;
top: 55%;
left: 50%;
padding: 20px 15px;
border-radius: 5px;
/* transform: translate(-50%, -70%); */
-webkit-transform: translate(-50%, -0%);
-webkit-transform: translate(-50%, -0%);
background: #f3f3f3;
}
.container .modal p {
margin-top: 20px;
margin-bottom: 20px;
font-size: 16px;
color: #353535;
text-align: center;
}
.type_words {
padding: 12px 20px;
}
.page_one {
position: absolute;
z-index: 10;
top: 50%;
left: 50%;
transform: translate(-50%, -90%);
}
.text {
color: pink;
font-size: 16px;
}
.xin {
width: 20%;
}
2. 3D相册裁剪（教程）
教程如下：需1张图片（可定制）
1. 照片裁剪（教程）
第一：下载美图秀秀/百度下载/或软件安装
或者使用在线链接裁剪 —> 在线裁剪图片链接
2.美图秀秀（电脑版）裁剪图片
1 选择要裁剪的图片
2、图片大小建议裁剪在600px *600px左右，否则图片太大，页面会卡顿
3…保存照片
3.歌曲mp3替换教程(tutorial)
如果需要更换mp3背景音乐可以自行下载替换~mp3免费下载地址
1.搜索想要的歌曲
2. 下载
3 获取歌曲id
4关注公众号/复制链接到浏览器打开
5 下载mp3~下载完成后，可以自己替换mp3文件（如果不想改代码，必须保持名称一致）
4、如何通过发送链接的方式向别人展示一个制作精良的网页的疗效？ 1.1 解决部署启动~>部署启动工具（永久免费使用）
1.您无需购买服务器即可部署在线手机网站模板欣赏，全世界都可以访问您的连接。 这里推荐一款程序员必备的工具~
该插件集成了很多好用的插件，免费下载安装，简单易懂，简直就是利器啊~需要的可以在文章下方公众号Z获取↓
2、你的代码疗效完成后，部署到网上，把链接发给别人，让对方通过你的链接点击进去，你就可以看到你网页的效果了，电脑端和手机端都可以！ （不然别人就得发文件才能查看你的网页，体验会不太好~）
1.1 部署流程
1.2 哇~部署成功
哇~部署成功了！ 你写的页面部署上线后，全世界的人都可以通过链接访问你的网页（永久免费使用）~
5.前端零基础入门到中级（视频+源码+开发软件+学习资料+面试题）全套（教程）
适合初学者到中级童鞋~
6.源码获取
~关注我，点赞博文~我每天都会给你带来更多知识！
1、看到这里手机网站模板欣赏，【点赞+收藏】三联~请支持我，你们的“点赞、收藏”就是我创作的动力。
2.关注我~每天带你学习：各种后端插件、3D炫丽效果、图片展示、文字效果，还有全站模板、大学生毕业模板、期末作业模板等！ “这里有很多前端开发人员，一起讲解前端Node知识，互相学习！”
3、以上内容相关的技术问题可以互相学习，也可以关注↓官方Z账号获取更多源码！
