html+css+javaScript实现炫酷烟花表白(云雾状粒子文字3D开场)七夕情人节表白/520表白源码HTML

最新推荐文章于 2024-09-05 15:00:20 发布

@码出未来-web网页设计

最新推荐文章于 2024-09-05 15:00:20 发布

阅读量4.5k

点赞数 7

分类专栏： 520情人节烟花告白生日快乐文章标签： js烟花告白 js制作烟花表白代码 html烟花制作七夕情人节 520情人节

本文链接：https://blog.csdn.net/ruan365392777/article/details/117993095

版权

❉ html+css+javaScript实现炫酷烟花表白❤ (云雾状粒子文字3D动画自动切换，支持自定义文字动画切换特效)/ 程序员表白必备

一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/圣诞节/元旦节跨年/程序员表白,
谁说我们程序猿不浪漫，马上要到520情人节了。当你在为女朋友买什么礼物犯愁的时候，不妨花点时间给她送个别样的礼物。更能体现你的真心，何乐而不为了？
Web前端基于Canvas实现的烟花表白特效，基于对Canvas的理解实现，总会有那么一段小惊喜，可以惊艳到彼此短暂的时光。

❉ 文章目录

❉ html+css+javaScript实现炫酷烟花表白❤ (云雾状粒子文字3D动画自动切换，支持自定义文字动画切换特效)/ 程序员表白必备
❉ 前言
- 1. (PC端烟花)效果演示
- 1. (H5手机端烟花)效果演示
❉ 代码文件目录
一、代码实现
二、3D相册裁剪(教程)
- 1.相片裁剪(教程)
- 2.美图秀秀(电脑版)裁剪图片
三、歌曲mp3更换教程(教程)
四、做好的网页效果,如何通过发链接给别人看?
- 1.1 解决部署上线~> 部署上线工具(可永久免费使用)
- - 1.1部署流程
  - 1.2 哇~ 部署成功
五、前端零基础入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
六、❉ 源码获取
七、❉更多表白源码

❉ 前言

canvas实现的颗粒状烟花文本特效，白色云雾状的粒子文字3d动画自动切换，支持自定义各种字符文字动画切换特效

1. (PC端烟花)效果演示

1.烟花演示地址:

2.含开场白+表白烟花演示地址
在这里插入图片描述

1. (H5手机端烟花)效果演示

在这里插入图片描述

❉ 代码文件目录

在这里插入图片描述

一、代码实现

html (部分)

<!--
 * @Author: xf
 * @Date: 2020-12-21 09:07:44
 * @LastEditTime: 2020-12-21 17:27:07
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \firework-master\酷炫表白烟花\fire.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">