【酷炫烟花特效表白（Html5+CSS3+JS，带背景音乐哦！）】

发布时间：2024-03-30 09:01

快速阅读目录

    • 效果演示
    • 代码片段
    • 源码获取

效果演示

（同时也会有歌曲播放的哦！背景等都可以根据自己个人意愿来更改~）

这是第一种选择的部分效果展示：


这是第二种选择的部分效果展示：

代码片段

烟花.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=\"a8b.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\">
        <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)\">
    浏览器不支持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\">
    <div class=\"shape\">
        520
    div>
    <div class=\"shape\">
        I LOVE YOU
    div>
    <div class=\"shape\">
        茫茫人海
    div>
    <div class=\"shape\">
        相遇是缘
    div>
div>

<audio autoplay loop id=\"music\">
    <source src=\"music.mp3\" />
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>

fire.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 = [];
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 - 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)
    };
canvas.onclick = function() {
    var x = event.clientX;
    var y = event.clientY;
    var bigboom = new Boom(getRandom(canvas.width / 3, 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()
    }
};

源码获取

所有文件素材和全部代码都已经上传到“资源”中，需要的朋友可以下载~~

相关推荐

基于51单片机的温度检测报警系统

老顽固在13英寸苹果笔记本MacBook Air上开发C#.NET程序的感受浅谈

Linux - Shell基础命令

腾讯云工程师，站上奥斯卡尖峰

经典图像分割网络：Unet 支持libtorch部署推理【附代码】

Spring 读取和存储对象

机器学习--有监督学习和无监督学习

Unity技术支持团队性能优化经验分享

JavaWeb Servlet实现文件上传与下载功能实例

网络安全测试工具篇（开源&商业）

Unity 安卓平台读写

ios mysql注册登录界面_Vue+Vue Router+Axios+Webpack+Flask+MySQL实现简单的注册、登录验证功能...

苹果市值迈入两万亿，库克终于走出乔布斯的阴影？

使用Vite构建Vue3组件库

【JavaScript】高级语法——常用的数组处理方法

传输层协议介绍

Android 12(S) 图像显示系统 - drm_hwcomposer 简析（下）

【电赛最全备赛资源】电赛历年赛题源码+老学长挥泪经验之谈（文章较长全网最全）+电赛论文写作模板及评分标准【19电磁炮、17板球、15风力摆、13倒立摆、94-21全国大学生电子设计竞赛历年真题】

@insert mybatis踩坑记录,实体接收前端传递的参数

vue-amap高德地图轨迹回放动画实现

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网，如有侵权请联系：561261067@qq.com

桂ICP备16001015号