HTML5庆祝生日蛋糕烟花特效

最新推荐文章于 2024-05-03 18:04:23 发布
最新推荐文章于 2024-05-03 18:04:23 发布
阅读量3.9k 收藏 29
点赞数 7
分类专栏： 网站建设基础（html+div+css） 文章标签： html5 javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dica54dica/article/details/129696102
版权

HTML5庆祝生日蛋糕烟花特效

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML5 Birthday Cake Fireworks</title>
    <style>
        canvas {
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
        }
    </style>
</head>
<body>
    <canvas id="fireworks"></canvas>
    <script>
        // 烟花特效
        (function () {
            var canvas = document.getElementById('fireworks'),
                ctx = canvas.getContext('2d'),
                fireworks = [],
                particles = [],
                hue = 120,
                limiterTotal = 5,
                limiterTick = 0,
                timerTotal = 80,
                timerTick = 0,
                mousedown = false,
                mx,
                my;
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            function random(min, max) {
                return Math.random() * (max - min) + min;
            }
            function calculateDistance(p1x, p1y, p2x, p2y) {
                var xDistance = p1x - p2x,
                    yDistance = p1y - p2y;
                return Math.sqrt(Math.pow(xDistance, 2) + Math.pow(yDistance, 2));
            }
            function Firework(sx, sy, tx, ty) {
                this.x = sx;
                this.y = sy;
                this.sx = sx;
                this.sy = sy;
                this.tx = tx;
                this.ty = ty;
                this.distanceToTarget = calculateDistance(sx, sy, tx, ty);
                this.distanceTraveled = 0;
                this.coordinates = [];
                this.coordinateCount = 3;
                while (this.coordinateCount--) {
                    this.coordinates.push([this.x, this.y]);
                }
                this.angle = Math.atan2(ty - sy, tx - sx);
                this.speed = 2;
                this.acceleration = 1.05;
                this.brightness = random(50, 70);
                this.targetRadius = 1;
            }
            Firework.prototype.update = function (index) {
                this.coordinates.pop();
                this.coordinates.unshift([this.x, this.y]);
                if (this.targetRadius < 8) {
                    this.targetRadius += 0.3;
                } else {
                    this.targetRadius = 1;
                }
                this.speed *= this.acceleration;
                var vx = Math.cos(this.angle) * this.speed,
                    vy = Math.sin(this.angle) * this.speed;
                this.distanceTraveled = calculateDistance(this.sx, this.sy, this.x + vx, this.y + vy);
                if (this.distanceTraveled >= this.distanceToTarget) {
                    createParticles(this.tx, this.ty);
                    fireworks.splice(index, 1);
                } else {
                    this.x += vx;
                    this.y += vy;
                }
            }
            Firework.prototype.draw = function () {
                ctx.beginPath();
                ctx.moveTo(this.coordinates[this.coordinates.length - 1][0], this.coordinates[this.coordinates.length - 1][1]);
                ctx.lineTo(this.x, this.y);
                ctx.strokeStyle = 'hsl(' + hue + ', 100%, ' + this.brightness + '%)';
                ctx.stroke();
                ctx.beginPath();
                ctx.arc(this.tx, this.ty, this.targetRadius, 0, Math.PI * 2);
                ctx.stroke();
            }
            function createParticles(x, y) {
                var particleCount = 30;
                while (particleCount--) {
                    particles.push(new Particle(x, y));
                }
            }
            function Particle(x, y) {
                this.x = x;
                this.y = y;
                this.coordinates = [];
                this.coordinateCount = 5;
                while (this.coordinateCount--) {
                    this.coordinates.push([this.x, this.y]);
                }
                this.angle = random(0, Math.PI * 2);
                this.speed = random(1, 10);
                this.friction = 0.95;
                this.gravity = 1;
                this.hue = random(hue - 20, hue + 20);
                this.brightness = random(50, 80);
                this.alpha = 1;
                this.decay = random(0.015, 0.03);
            }
            Particle.prototype.update = function (index) {
                this.coordinates.pop();
                this.coordinates.unshift([this.x, this.y]);
                this.speed *= this.friction;
                this.x += Math.cos(this.angle) * this.speed;
                this.y += Math.sin(this.angle) * this.speed + this.gravity;
                this.alpha -= this.decay;
                if (this.alpha <= this.decay) {
                    particles.splice(index, 1);
                }
            }
            Particle.prototype.draw = function () {
                ctx.beginPath();
                ctx.moveTo(this.coordinates[this.coordinates.length - 1][0], this.coordinates[this.coordinates.length - 1][1]);
                ctx.lineTo(this.x, this.y);
                ctx.strokeStyle = 'hsla(' + this.hue + ', 100%, ' + this.brightness + '%, ' + this.alpha + ')';
                ctx.stroke();
            }
            function loop() {
                ctx.globalCompositeOperation = 'destination-out';
                ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
                ctx.fillRect(0, 0, canvas.width, canvas.height);
                ctx.globalCompositeOperation = 'lighter';
                var i = fireworks.length;
                while (i--) {
                    fireworks[i].draw();
                    fireworks[i].update(i);
                }
                var i = particles.length;
                while (i--) {
                    particles[i].draw();
                    particles[i].update(i);
                }
                if (timerTick >= timerTotal) {
                    if (!mousedown) {
                        fireworks.push(new Firework(canvas.width / 2, canvas.height, random(0, canvas.width), random(0, canvas.height / 2)));
                        timerTick = 0;
                    }
                } else {
                    timerTick++;
                }
                if (limiterTick >= limiterTotal) {
                    if (mousedown) {
                        fireworks.push(new Firework(canvas.width / 2, canvas.height, mx, my));
                        limiterTick = 0;
                    }
                } else {
                    limiterTick++;
                }
                requestAnimationFrame(loop);
            }
            window.onload = function () {
                canvas.addEventListener('mousemove', function (e) {
                    mx = e.pageX - canvas.offsetLeft;
                    my = e.pageY - canvas.offsetTop;
                });
                canvas.addEventListener('mousedown', function (e) {
                    e.preventDefault();
                    mousedown = true;
                });
                canvas.addEventListener('mouseup', function (e) {
                    e.preventDefault();
                    mousedown = false;
                });
                loop();
            };
        })();
    </script>
</body>
</html>

以上代码使用HTML5的元素和JavaScript实现了一个简单的生日蛋糕烟花特效。在页面加载完成后，会自动启动动画，当鼠标点击页面时，会在鼠标位置发射一个烟花。

效果展示

HTML5庆祝生日蛋糕烟花特效

小激动. Caim
关注
  • 7
    点赞
  • 踩
  • 29
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
生日祝福、新年祝福、表白的HTML源码
09-20
基于 HTML+CSS+JavaScript 制作了一个小网页，有简单的用户登录功能，蛋糕、祝福、照片、烟花等小功能；稍加修改就可以用来表白、给好朋友送祝福、祝福新年等。 此资源是源码，下载即可使用；效果展示：https://download.csdn.net/download/AnChenliang_1002/86590763。详细的修改教程，请参考：https://blog.csdn.net/AnChenliang_1002/article/details/126963438?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22126963438%22%2C%22source%22%3A%22AnChenliang_1002%22%7D
生日祝福、新年祝福、表白的HTML（视频演示）
09-20
基于 `HTML+CSS+JavaScript` 制作了一个小网页，有简单的用户登录功能，蛋糕、祝福、照片、烟花等小功能；稍加修改就可以用来表白、给好朋友送祝福、祝福新年等。这里只是视频演示，对应的代码链接：https://download.csdn.net/download/AnChenliang_1002/86591059
烟花代码,予心上人最璀璨烟花—— 附源码与成品（HTML+CSS+JS
最新发布
2401_84447262的博客
05-03 1142
整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》dth / 2,});} else {context.font = fontSize + “vw 宋体 bold”;“rgba(” +
HTML5生日快乐祝福网页制作【蛋糕烟花+蓝色梦幻海洋3D相册】HTML+CSS+JavaScript
12-31 1093
1 网页简介：基于HTML+CSS+JavaScript 制作七夕情人节表白网页、生日祝福、七夕告白、 求婚、浪漫爱情3D相册、炫酷代码,快来制作一款高端的表白网页送(他/她)浪漫的告白,制作修改简单,可自行更换背景音乐,文字和图片即可使用等任意html编辑软件进行运行及修改编辑等操作）。
完整html生日祝福代码_经典生日祝福语，精美生日贺卡生日快乐图片
weixin_39747383的博客
11-24 5957
宝贝，你的生日就在今天，祝你可爱依旧，快乐多多！也许你并不是为我而生，可我却有幸与你相伴。愿我在有生之年，年年为你点燃生日的烛焰。一支蜡烛，一颗心愿，一份真情，祝你生日快乐！花朝月夕，如诗如画。祝你生日快乐、温馨、幸福……愿你的生日充满无穷的快乐，愿你今天的回忆温馨，愿你所有的梦想甜美，愿你这一年称心如意！在你生日的这一天，我没有跟你在一起，只希望你能快乐、健康、美丽，生命需要奋斗、创造...
Html5实现生日快乐网站，自带音效与蛋糕动画！
初尘屿风的博客
06-04 2万+
Html5实现生日快乐网站，自带音效与蛋糕动画！
HTML生日快乐-生日祝福（烟花+粒子动画）
热门推荐
kongbai的博客
11-11 3万+
​HTML生日快乐-生日祝福（烟花+粒子动画） 粒子动画：https://github.com/kennethcachia/shape-shifter 烟花：网上有许多相关代码，未找到原作者 效果：http://8.130.106.21/HappyBirthday/HappyBirthday.html ​
HTML5七夕情人节表白网页制作【粉色樱花雨3D相册】HTML+CSS+JavaScript
HTML网页设计
07-21 1万+
1 网页简介：基于 ,快来制作一款高端的表白网页送(他/她)浪漫的告白,制作修改简单,可自行更换背景音乐,文字和图片即可使用2.网页编辑：任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。代码如下（示例）：以下仅展示部分代码供参考~ 2.CSS代码 三、精彩专栏推荐： 看到这里了就 【点赞，好评，收藏】 三连 支持下吧，你的支持是我创作的动力。HTM
html生日蛋糕
chengjingtao123的博客
01-21 996
!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .birthday .container{ width:600px; height:600px; margin:0px auto; .
HTML5生日快乐在线网页祝福 (一场浪漫的烟花秀) HTML+CSS+JavaScript
HTML网页设计 专注大学生网页设计
09-30 2万+
📒网站文件方面：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；📙网页编辑方面：可使用任意HTML编辑软件（如： 等任意html编辑软件进行运行及修改编辑等操作）。 其中： （1）📜html文件包含：其中index.html是首页、其他html为二级页面； （2）📑 css文件包含：css全部页面样式,3D动态效果,雪花飘落等等 （3）📄 js文件包含：页面炫酷效果实现14-html5 canvas生日快乐文字烟花背景动画特效 🏠JS代码 五、🎁更多
html5css3生日蛋糕动画特效
10-21
html5+css3生日蛋糕动画特效代码
HTML5庆祝生日蛋糕烟花特效.zip
10-09
HTML5庆祝生日蛋糕烟花特效.zip是一个包含HTML5和JavaScript技术实现的网页特效资源。这个特效主要是为了在网页上展示一个动态的生日蛋糕烟花秀，为庆祝活动增添喜庆气氛。以下将详细介绍其中涉及的主要知识点： 1....
HTML5七夕情人节表白网页制作【HTML5庆祝生日蛋糕烟花特效】HTML+CSS+JavaScript
08-10
HTML5期末考核大作业源码 包含 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、游戏、 节日、 戒烟、 电影、 ...
【烟花代码】，情人节，情侣生日礼物代码适用
诗一样的代码
05-03 4282
【烟花代码】，情人节，情侣生日礼物代码适用 老规矩，先上效果图 图片做了加速处理，放樱花的位置，速度完全由点击控制。 1初始化粒子系统 var Particle = function(x, y, hue){ this.x = x; this.y = y; this.coordLast = [ {x: x, y: y}, {x: x, y: y}, {x: x, y: y} ]; this.angle = rand(0, 360); this.speed = ra
用python画一个需要烟花生日快乐林作龙站满整个电脑屏幕
weixin_35754962的博客
01-24 1348
我可以给你一个示例代码来绘制一个烟花动画，但是要注意，这需要使用第三方库 "pygame" 。 import pygame import random # 初始化 pygame pygame.init() # 设置窗口大小 size = (700, 500) screen = pygame.display.set_mode(size) # 设置标题 pygame.display.set_ca...
用html写出生日蛋糕,纯HTML5+CSS3制作生日蛋糕代码
weixin_31036949的博客
06-07 9253
.birthday .container{width:600px;height:600px;margin:0px auto;background: #fafafa;border-radius:5px;position: relative;}/**** 顶层的**/.birthday .top-one{position: absolute;width:280px;height: 280px;bott...
HTML5创作生日蛋糕，three.js创作生日蛋糕，生日快乐3D建模动画
qq_36175946的博客
04-04 5409
前段时间，女朋友生日，人在外地出差，不知道如何给她过生日，所以想了个办法，做一个程序送给她，完事后再补一个生日过去，考虑到有兄弟会找相关的素材，所以今天公布出来一下，做的不怎么完善，还望海涵！ 效果截图： 话不多说，直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>生日快乐</title> <style
html5制作烟花生日蛋糕代码
07-09
### 回答1： 要用HTML5制作烟花生日蛋糕代码，可以通过canvas元素和JavaScript实现。下面是一个简单的实例代码： HTML部分： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>烟花生日蛋糕</title> <style> canvas { background-color: #000; } </style> </head> <body> <canvas id="fireworks" width="800" height="600"></canvas> <script src="fireworks.js"></script> </body> </html> ``` JavaScript部分（fireworks.js）： ```javascript var fireworks = document.getElementById('fireworks'); var ctx = fireworks.getContext('2d'); // 绘制烟花 function drawFirework(x, y) { var colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff']; var numParticles = 100; var particles = []; for(var i=0; i<numParticles; i++) { var particle = { x: x, y: y, radius: Math.random() * 6 + 2, color: colors[Math.floor(Math.random() * colors.length)], velocityX: Math.random() * 4 - 2, velocityY: Math.random() * 4 - 2.5, gravity: 0.1, fade: 0.01 }; particles.push(particle); } function update() { ctx.clearRect(0, 0, fireworks.width, fireworks.height); for(var i=0; i<numParticles; i++) { var particle = particles[i]; particle.velocityY += particle.gravity; particle.x += particle.velocityX; particle.y += particle.velocityY; particle.radius -= particle.fade; ctx.beginPath(); ctx.arc(particle.x, particle.y, particle.radius, 0, Math.PI * 2); ctx.fillStyle = particle.color; ctx.fill(); ctx.closePath(); if(particle.radius <= 0) { particles.splice(i, 1); i--; numParticles--; } } if(numParticles === 0) { clearInterval(animation); } } var animation = setInterval(update, 1000/60); } // 在点击位置绘制烟花 fireworks.addEventListener('click', function(event) { var rect = fireworks.getBoundingClientRect(); var x = event.clientX - rect.left; var y = event.clientY - rect.top; drawFirework(x, y); }); ``` 通过运行上述代码，你可以在网页上点击鼠标，然后会在点击位置绘制出烟花效果，那就好像在生日蛋糕上点燃了一颗引线一样。每次点击都会绘制一个新的烟花效果。希望这个简单的示例对你有所帮助！ ### 回答2： HTML5是一种适用于网页设计和开发的标准技术，包含了HTML、CSS和JavaScript等语言。要用HTML5制作烟花生日蛋糕代码，可以结合CSS和JavaScript实现一些特效和动画效果。 首先，在HTML中创建一个div容器，用于表示蛋糕的形状和位置。可以使用CSS设置蛋糕的外观，例如颜色、大小和形状。 接下来，在HTML中嵌入一段JavaScript代码，用于添加烟花特效。可以使用JavaScript中的canvas元素和相关函数来创建烟花动画。 具体步骤如下： 1. 在HTML文件中创建一个div容器，并设置其样式为蛋糕的外观和位置。 ```html <div id="cake" style="background-color: lightpink; width: 200px; height: 300px;"></div> ``` 2. 在JavaScript代码中，获取到这个div容器，并创建一个canvas元素，用于绘制烟花。 ```javascript var cake = document.getElementById("cake"); var canvas = document.createElement("canvas"); canvas.width = cake.clientWidth; canvas.height = cake.clientHeight; cake.appendChild(canvas); var ctx = canvas.getContext("2d"); ``` 3. 编写用于绘制烟花的函数。可以使用JavaScript的canvas API绘制出烟花的形状和颜色。 ```javascript function drawFirework(x, y, color) { // 绘制烟花的具体形状和颜色 //例如：ctx.beginPath(); //ctx.arc(x, y, 5, 0, 2 * Math.PI); //ctx.fillStyle = color; //ctx.fill(); } ``` 4. 在JavaScript代码中，添加触发绘制烟花的事件。可以使用JavaScript的定时器或者点击事件等来触发绘制烟花的函数，并设置随机的位置和颜色。 ```javascript setInterval(function() { var x = Math.random() * canvas.width; var y = Math.random() * canvas.height; var color = "rgb(" + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + ")"; drawFirework(x, y, color); }, 1000); ``` 以上是一个简单的示例，在实际制作过程中，可以根据需要进行更加复杂的调整和美化。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值