1200字范文 > HTML5七夕情人节表白网页制作 (生日快乐文字烟花背景动画特效) HTML+CSS+JavaScript

HTML5七夕情人节表白网页制作 (生日快乐文字烟花背景动画特效) HTML+CSS+JavaScript

时间：2020-07-21 19:52:19

HTML5七夕情人节表白网页制作 ❤生日快乐文字烟花背景动画特效❤ HTML+CSS+JavaScript

这是程序员表白系列中的100款网站表白之一，旨在让任何人都能使用并创建自己的表白网站给心爱的人看。此波共有100个表白网站，可以任意修改和使用，源码已上传，演示网址如下。

🧡文章末尾-已经附上源码下载地址

🧡作者主页-更多源码

🧡七夕情人节专栏文章

作品介绍

1.网页作品简介：基于HTML+CSS+JavaScript 制作七夕情人节表白网页, 生日祝福, 七夕告白, 求婚, 浪漫爱情3D相册,炫酷代码,已经兼容手机端和电脑端, 快来制作一款高端的表白网页送(他/她)生日祝福网页,制作修改简单, 需替换图片和文字即可.可自行更换背景音乐。

2.网页作品编辑：任意HTML编辑软件（如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++）均可修改网页。

文章目录

HTML5七夕情人节表白网页制作 ❤生日快乐文字烟花背景动画特效❤ HTML+CSS+JavaScript作品介绍一、作品展示(已兼容手机端/电脑端)二、文件目录三、代码实现四、学习资料五、源码下载六、更多源码

一、作品展示(已兼容手机端/电脑端)

二、文件目录

三、代码实现

<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8"><title>烟火</title><script src="js/jquery.min.js"></script><script src="js/canvas.js"></script><script src="js/deepCopy.js"></script><script src="js/Firework.js"></script></head><body><canvas id="canvas" width="500" height="500"></canvas> <script>var canvas = $$("canvas"),ctx = canvas.getContext("2d"),g = 0.25,//模拟重力加速度n = 5,//一次性发射的烟火的数量fireworkList = [],//存放所有烟火对象//烟火形状圆形椭圆形爱心形fireworkTypeList = [createCircleFirework, createEllipseFirework, createHeartFirework],totalNum = 0,//发射烟火的总数量surprise_num = 25,//当发射烟火数量达到25时,发射生日快乐字样的烟火flag = true;//是否发射生日快乐字样的烟火canvas.width = $(window).width() - 15;canvas.height = $(window).height() - 20;var init = function(firework,params){//初始化一个烟火var beforeBalst = firework.getBeforeBalst();firework.setCtx(ctx);firework.setStatus(1);//状态为点燃引线firework.setNum(100 + Math.floor(20 * Math.random()));//爆炸之后的烟花数量firework.setRoundness(getType(params) == "object" ? (getType(params.roundness) == "number" ? params.roundness : 0.25) : 0.25);//默认的规则度是0.25,这样爆炸的烟花与真实的最像//firework.setFireworkType(getType(params) == "object" ? params.fireworkType : fireworkTypeList[Math.floor(Math.random() * fireworkTypeList.length)]);//从三种形状中随机烟花形状firework.setFireworkType(getType(params) == "object" ? params.fireworkType : createCircleFirework);//默认圆形烟花firework.setDelay(Math.floor(30 * Math.random()));//引线燃烧的时间,单位为帧, 最多30帧,即0.5sbeforeBalst.setAnimate({quiescence : {//发射位置为底部中间x : canvas.width / 2,y : canvas.height,deg : 0,zoom : 1},move : {//发射速度向量vx : -7 + 14 * Math.random(),vy : -22 + 4 * Math.random(),pal : 0,scale : 0},translate : {//发射加速度,有一个为g的重力加速度ax : 0,ay : g,apal : 0,scale : 0}});beforeBalst.setR(3);//烟火半径为3像素beforeBalst.setColor("#FFFFFF");//白色beforeBalst.setLife(50 + Math.floor(Math.random() * 50));//烟花从发射到爆炸的时间,单位为帧,即50-100帧后爆炸}var loop = function(){draw();update();requestAnimationFrame(function(){//每秒触发60次的方法,因此动画是60帧的loop();});};loop();</script></body></html>