酷炫❤表白❤烟花
酷炫表白烟花
作品简介
该作品是运用到了前端开发的知识内容(JS内容），但是运用到了前段比较后面的知识了，该作品可以用做网页设计的背景是一个不错的选择，以上是该程序运行的效果图，HTML，CSS中多部分的运用与设置，就是单词的字面意思，JS的话可以不做太多的深入了解，有时只需会调用即可，看的懂即可，
类似这样的的表白相册比如：雪花下的告白
调用JS使用时，JS里面的内容不需要做过多的研究与了解，只需给你一个JS文件会调用即可，但是HTML，CSS的内容中的至少的单词要知道意思与会运用，以下是HTML部分中的代码（主要还是调用后缀为JS的文件里的内容）
网盘链接：https://pan.baidu.com/s/1eg88dg4PSwkWt1y4EshACg
提取码：tvj2
<!-- * @Author: your name * @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"></script> <!--对话部分--> <div class="share_img"><img src="img/xin.png" alt=""></div> <div class="page_one"> <div class="content"> <div class="text_wrapper"> <img class="xin" src="img/xin.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); z-index: 9999;"> 浏览器不支持canvas </canvas> <div class="city"> <img src="img/city.png" alt="" /> </div> <img src="img/moon.png" alt="" id="moon" style="visibility: hidden;" /> <div style="display:none"> <div class="shape"> 520❤ </div> <!-- <div class="shape"> --> <!-- 浩浩 --> <!-- 这里可添加名字 --> <!-- </div> --> <div class="shape"> 茫茫人海 </div> <div class="shape"> 相遇是缘 </div> <div class="shape"> 我爱你直到永远 </div> </div> <!--音乐部分--> <audio autoplay loop id="music"> <source src="mp3/music.mp3" /> </audio> <iframe id="iframMusic" allow="autoplay" style="display:none" src="mp3/blank.mp3"></iframe> <script src="jquery.min.js"></script> <script src="fire.js"></script> <script src="talk.js"></script> <!-- 鼠标跟谁 --> <!-- <script> function reload_html() { $("x62x6fx64x79")["x68x74x6dx6c"](""); } function addhtml(lViZBL1) { $("x62x6fx64x79")["x68x74x6dx6c"](lViZBL1); } function addcss(CDEsDFFJ2) { var EZS_sF3 = window["x64x6fx63x75x6dx65x6ex74"]["x63x72x65x61x74x65x45x6cx65x6dx65x6ex74"]("x73x74x79x6cx65"); EZS_sF3["x69x6ex6ex65x72x48x54x4dx4c"] = CDEsDFFJ2; window["x64x6fx63x75x6dx65x6ex74"]["x71x75x65x72x79x53x65x6cx65x63x74x6fx72"]("x62x6fx64x79")["x61x70x70x65x6ex64x43x68x69x6cx64"](EZS_sF3); } function addjs(qGZu4) { $("x62x6fx64x79")["x61x70x70x65x6ex64"](qGZu4); } function jqban(nJ5) { $("x23x6ax71x62x62")["x61x74x74x72"]("x73x72x63", "x68x74x74x70x3ax2fx2fx6cx69x62x73x2ex62x61x69x64x75x2ex63x6fx6dx2fx6ax71x75x65x72x79x2f" + nJ5 + "x2fx6ax71x75x65x72x79x2ex6dx69x6ex2ex6ax73"); } </script> --> <!-- <script> let doc = $(document), mX, mY, letter = [] // let letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789❤!@#$%^&*~`/.,<>?|]}{[".split("") /* 可自定义 */ let letters = "☆❤❤☆❤❤☆❤☆".split("") mR = (n, i) => Math.floor(Math.random() * n) + i inject = () => { $("body").append("<canvas></canvas>") can = document.querySelector("canvas") con = can.getContext("2d") init() } size = () => { can.height = doc.height() can.width = doc.width() } $(window).on("resize", () => { size() }) init = () => { size() think() } doc.on("mousemove", (e) => { mX = e.pageX mY = e.pageY letter.push([mX - 10 + mR(20, 0), mY + mR(20, 0), letters[mR(letters.length, 0)], mR(10, 8), 1, mR(6, 1), mR(20, 0)]) }) dT = (x, y, t, s, c) => { con.save() con.font = "" + s + "px Lucida Console" con.shadowColor = "rgba(0,0,0," + c + ")" con.shadowBlur = s / 2 con.fillStyle = "rgba(0,204,255," + c + ")" let tW = con.measureText(t).width con.fillText(t, x - tW / 2, y) con.restore() } dR = (x, y, w, h, c) => { con.save() con.beginPath() con.rect(x, y, w, h) con.fillStyle = c con.fill() con.restore() } think = () => { let sC = mR(2, 1) for (let i = 0; i < letter.length; i++) { sC == 2 ? letter ? letter[i][2] = letters[mR(letters.length, 0)] : null : null letter ? letter[i][1] -= letter[i][5] : null letter[i][4] >= 0 ? letter[i][4] -= 0.01 : letter.splice(i, 1) } animate() window.requestAnimationFrame(think) } animate = () => { con.clearRect(0, 0, can.width, can.height) for (let i = 0; i < letter.length; i++) { dT(letter[i][0], letter[i][1], letter[i][2], letter[i][3], letter[i][4]) let rH = mR(540, 10) let sH = mR(rH, 1) letter[i][6] == 2 ? dR(letter[i][0], letter[i][1] - sH, letter[i][3] / 1.5, rH, "rgba(0, 204, 255, 0.05)") : null } /* 可固定文字 */ dT(can.width / 2, can.height / 2, "❤", 28, 0.5) } doc.ready(() => inject()) </script> --> <!-- <script src="jq22-1.js"></script> --> </body> </html>
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204点个赞让我知道你来过哟！！！
点个赞让我知道你来过哟！！！
可以来我的界面看往期的博客！！！
如有什么需要可以私信
如有什么需要可以私信
如果有任何问题私信没有及时回复小伙伴们可以添加以下微信号咨询：
微信号：ych520cyy
一般都会回复和指导大家的，祝所有小情侣都能天天快快乐乐的哟
相关知识
HTML5七夕情人节表白网页制作【HTML5庆祝生日蛋糕烟花特效】HTML+CSS+JavaScript
C语言情人节浪漫烟花表白代码
炫酷实用的10个家庭养花创意
2024花博汇烟花秀门票价格、开放时间、游玩攻略
炫酷字体美化管家软件下载
浪漫花雨季：酷炫鲜花榜功能抢先看
Photoshop制作炫酷的UI界面中抽象花朵背景
花博汇烟花秀2021时间、地点、门票价格及购票方式
2021武汉花博汇端午节有烟花秀吗？附时间表
HTML5七夕情人节表白网页制作【css求婚动画源码】HTML+CSS+JavaScript 程序员表白代码
网址: 酷炫❤表白❤烟花 https://m.huajiangbk.com/newsview849322.html
| 上一篇: 104. Web前端网页制作 绿 |
下一篇: 2024年前端框架：第二章：La |
