@码出未来-web网页设计 于 2021-06-17 14:33:40 发布❉ html+css+javaScript实现炫酷烟花表白❤ (云雾状粒子文字3D动画自动切换，支持自定义文字动画切换特效)/ 程序员表白必备
一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/圣诞节/元旦节跨年/程序员表白,
谁说我们程序猿不浪漫，马上要到520情人节了。当你在为女朋友买什么礼物犯愁的时候，不妨花点时间给她送个别样的礼物。更能体现你的真心，何乐而不为了？
Web前端基于Canvas实现的烟花表白特效，基于对Canvas的理解实现，总会有那么一段小惊喜，可以惊艳到彼此短暂的时光。
❉ 前言
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">
1234567891011121314151617181920212223242526272829303132333435363738394041424344
web前端小日记
微信公众号
html5期末大作业/dw静态网页设计/java毕设
