❉ 520程序员求婚Html+Js+Css烟花❤ (爱心3D动画,自定义文字，背景音乐)/ 程序员表白必备
一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/程序员表白,
非常经典的程序员式的表达爱情的方式，是你哄女朋友开心的终极武器。在人们的印象中，程序员容易使人联想到宅男、沉闷、古板等等这些不好的词语。但是……你们都错了，程序员也可以很浪漫很感性。并不是所有的IT男都那么闷呆的。
————————————————

❉ 文章目录

1. PC(电脑端)演示

2. H5(手机端)演示

html (部分)

js (部分代码)

3、前端零基础入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)

适合入门到高级的童鞋们入手~

4、❉ 源码获取❉ ~ 关注我，点赞博文~ 每天带你涨知识!

❉ 前言

程序员浪漫起来真是让人难以抵挡啊…想学那么高级的表白方式恐怕需要修炼几年，数据派为技术小白奉上一个简单易操作的表白方法，可以抱走向程序员表白呦~

❉ 效果演示

1. PC(电脑端)演示

2. H5(手机端)演示

❉代码文件目录

一、花瓣相册(关键代码实现)

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"><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"/>
</head>
<body onselectstart="return false">
<!--对话部分-->
<div class="share_img"><img src="./a8.png" alt=""></div><div class="page_one"><div class="content"><div class="text_wrapper"><img src="a8.png" alt=""><div class="text">小姐姐，我好喜欢你，你愿意做我女朋友吗？</div></div></div><div class="btn-groups" style="margin-left: 100px;margin-top: 0px;"><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>
<!--烟花部分-->
<canvas id='cas' style="background-color:rgba(0,5,24,1);width: 1786px;" >浏览器不支持canvas
</canvas>
<div class="city"><img src="city.png" alt="" />
</div>
<img src="moon.png" alt="" id="moon" style="visibility: hidden;" />
<div style="display:none;text-align: center;;"><div class="shape">我爱你！</div><div>自己定义文字
</div><div class="shape" >希望你开心快乐</div><div class="shape" >
阳光很暖你很好看
</div><div class="shape">祝你无忧无虑</div><div class="shape">学业有成</div><div class="shape">来日方长</div><div class="shape">祝你顺利forever</div><div class="shape">彼此温暖|互不辜负</div><div class="shape">春风十里不及你</div>
</div>
<!--音乐部分-->
<audio autoplay loop id="music"><source src="./music.mp3" muted autoplay/>
</audio>
<iframe  id="iframMusic" allow="autoplay" style="display:none" src="./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 animate() {ctx.save();ctx.fillStyle = "rgba(0,5,24,0.1)";ctx.fillRect(0, 0, canvas.width, canvas.height);ctx.restore();var newTime = new Date();if (newTime - lastTime > 500 + (window.innerHeight - 767) / 2) {var random = Math.random() * 100 > 33 ? true: false;var x = getRandom(canvas.width / 5, canvas.width * 4 / 5);var y = getRandom(50, 200);if (random) {var bigboom = new Boom(getRandom(canvas.width / 3, canvas.width * 2 / 3), 2, "#FFF", {x: x,y: y});bigbooms.push(bigboom)} else {var bigboom = new Boom(getRandom(canvas.width / 3, canvas.width * 2 / 3), 2, "#FFF", {x: canvas.width / 2,y: 200},document.querySelectorAll(".shape")[parseInt(getRandom(0, document.querySelectorAll(".shape").length))]);bigbooms.push(bigboom)}lastTime = newTime;console.log(bigbooms)}stars.foreach(function() {this.paint()});drawMoon();bigbooms.foreach(function(index) {var that = this;if (!this.dead) {this._move();this._drawLight()} else {this.booms.foreach(function(index) {if (!this.dead) {this.moveTo(index)} else {if (index === that.booms.length - 1) {bigbooms[bigbooms.indexOf(that)] = null}}})}});raf(animate)
}
function drawMoon() {var moon = document.getElementById("moon");var centerX = canvas.width - 250,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, 1400 / 60)};
canvas.onclick = function() {var x = event.clientX;var y = event.clientY;var bigboom = new Boom(getRandom(canvas.width / 2, canvas.width * 2 / 3), 2, "#FFF", {x: x,y: y});bigbooms.push(bigboom)
};
var Boom = function(x, r, c, boomArea, shape) {this.booms = [];this.x = x;this.y = (canvas.height + r);this.r = r;this.c = c;this.shape = shape || false;this.boomArea = boomArea;this.theta = 0;this.dead = false;this.ba = parseInt(getRandom(80, 200))
};
Boom.prototype = {_paint: function() {ctx.save();ctx.beginPath();ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI);ctx.fillStyle = this.c;ctx.fill();ctx.restore()},_move: function() {var dx = this.boomArea.x - this.x,dy = this.boomArea.y - this.y;this.x = this.x + dx * 0.01;this.y = this.y + dy * 0.01;if (Math.abs(dx) <= this.ba && Math.abs(dy) <= this.ba) {if (this.shape) {this._shapBoom()} else {this._boom()}this.dead = true} else {this._paint()}},_drawLight: function() {ctx.save();ctx.fillStyle = "rgba(255,228,150,0.3)";ctx.beginPath();ctx.arc(this.x, this.y, this.r + 3 * Math.random() + 1, 0, 2 * Math.PI);ctx.fill();ctx.restore()},_boom: function() {var fragNum = getRandom(30, 200);var style = getRandom(0, 10) >= 5 ? 1 : 2;var color;if (style === 1) {color = {a: parseInt(getRandom(128, 255)),b: parseInt(getRandom(128, 255)),c: parseInt(getRandom(128, 255))}}var fanwei = parseInt(getRandom(300, 400));for (var i = 0; i < fragNum; i++) {if (style === 2) {color = {a: parseInt(getRandom(128, 255)),b: parseInt(getRandom(128, 255)),c: parseInt(getRandom(128, 255))}}var a = getRandom( - Math.PI, Math.PI);var x = getRandom(0, fanwei) * Math.cos(a) + this.x;var y = getRandom(0, fanwei) * Math.sin(a) + this.y;var radius = getRandom(0, 2);var frag = new Frag(this.x, this.y, radius, color, x, y);this.booms.push(frag)}},_shapBoom: function() {var that = this;putValue(ocas, octx, this.shape, 5,function(dots) {var dx = canvas.width / 2 - that.x;var dy = canvas.height / 2 - that.y;for (var i = 0; i < dots.length; i++) {color = {a: dots[i].a,b: dots[i].b,c: dots[i].c};var x = dots[i].x;var y = dots[i].y;var radius = 1;var frag = new Frag(that.x, that.y, radius, color, x - dx, y - dy);that.booms.push(frag)}})}
};
function putValue(canvas, context, ele, dr, callback) {context.clearRect(0, 0, canvas.width, canvas.height);var img = new Image();if (ele.innerHTML.indexOf("img") >= 0) {img.src = ele.getElementsByTagName("img")[0].src;imgload(img,function() {context.drawImage(img, canvas.width / 2 - img.width / 2, canvas.height / 2 - img.width / 2);dots = getimgData(canvas, context, dr);callback(dots)})} else {var text = ele.innerHTML;context.save();var fontSize = 200;context.font = fontSize + "px 宋体 bold";context.textAlign = "center";context.textBaseline = "middle";context.fillStyle = "rgba(" + parseInt(getRandom(128, 255)) + "," + parseInt(getRandom(128, 255)) + "," + parseInt(getRandom(128, 255)) + " , 1)";context.fillText(text, canvas.width / 2, canvas.height / 2);context.restore();dots = getimgData(canvas, context, dr);callback(dots)}
}
function imgload(img, callback) {if (img.complete) {callback.call(img)} else {img.onload = function() {callback.call(this)}}
}
function getimgData(canvas, context, dr) {var imgData = context.getImageData(0, 0, canvas.width, canvas.height);context.clearRect(0, 0, canvas.width, canvas.height);var dots = [];for (var x = 0; x < imgData.width; x += dr) {for (var y = 0; y < imgData.height; y += dr) {var i = (y * imgData.width + x) * 4;if (imgData.data[i + 3] > 128) {var dot = {x: x,y: y,a: imgData.data[i],b: imgData.data[i + 1],c: imgData.data[i + 2]};dots.push(dot)}}}return dots
}
function getRandom(a, b) {return Math.random() * (b - a) + a
}
var maxRadius = 1,stars = [];
function drawBg() {for (var i = 0; i < 100; i++) {var r = Math.random() * maxRadius;var x = Math.random() * canvas.width;var y = Math.random() * 2 * canvas.height - canvas.height;var star = new Star(x, y, r);stars.push(star);star.paint()}
}
var Star = function(x, y, r) {this.x = x;this.y = y;this.r = r
};
Star.prototype = {paint: function() {ctx.save();ctx.beginPath();ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI);ctx.fillStyle = "rgba(255,255,255," + this.r + ")";ctx.fill();ctx.restore()}
};
var focallength = 250;
var Frag = function(centerX, centerY, radius, color, tx, ty) {this.tx = tx;this.ty = ty;this.x = centerX;this.y = centerY;this.dead = false;this.centerX = centerX;this.centerY = centerY;this.radius = radius;this.color = color
};
Frag.prototype = {paint: function() {ctx.save();ctx.beginPath();ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);ctx.fillStyle = "rgba(" + this.color.a + "," + this.color.b + "," + this.color.c + ",1)";ctx.fill();ctx.restore()},moveTo: function(index) {this.ty = this.ty + 0.3;var dx = this.tx - this.x,dy = this.ty - this.y;this.x = Math.abs(dx) < 0.1 ? this.tx: (this.x + dx * 0.1);this.y = Math.abs(dy) < 0.1 ? this.ty: (this.y + dy * 0.1);if (dx === 0 && Math.abs(dy) <= 80) {this.dead = true}this.paint()}
};