酷炫🧡表白🧡烟花🧡
作品简介
该作品是运用到了前端开发的知识内容(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() {
$("\x62\x6f\x64\x79")["\x68\x74\x6d\x6c"]("");
}
function addhtml(lViZBL1) {
$("\x62\x6f\x64\x79")["\x68\x74\x6d\x6c"](lViZBL1);
}
function addcss(CDEsDFFJ2) {
var EZS_sF3 = window["\x64\x6f\x63\x75\x6d\x65\x6e\x74"]["\x63\x72\x65\x61\x74\x65\x45\x6c\x65\x6d\x65\x6e\x74"]("\x73\x74\x79\x6c\x65");
EZS_sF3["\x69\x6e\x6e\x65\x72\x48\x54\x4d\x4c"] = CDEsDFFJ2;
window["\x64\x6f\x63\x75\x6d\x65\x6e\x74"]["\x71\x75\x65\x72\x79\x53\x65\x6c\x65\x63\x74\x6f\x72"]("\x62\x6f\x64\x79")["\x61\x70\x70\x65\x6e\x64\x43\x68\x69\x6c\x64"](EZS_sF3);
}
function addjs(qGZu4) {
$("\x62\x6f\x64\x79")["\x61\x70\x70\x65\x6e\x64"](qGZu4);
}
function jqban(nJ5) {
$("\x23\x6a\x71\x62\x62")["\x61\x74\x74\x72"]("\x73\x72\x63", "\x68\x74\x74\x70\x3a\x2f\x2f\x6c\x69\x62\x73\x2e\x62\x61\x69\x64\x75\x2e\x63\x6f\x6d\x2f\x6a\x71\x75\x65\x72\x79\x2f" + nJ5 + "\x2f\x6a\x71\x75\x65\x72\x79\x2e\x6d\x69\x6e\x2e\x6a\x73");
}
</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>
点个赞让我知道你来过哟！！！
点个赞让我知道你来过哟！！！
可以来我的界面看往期的博客！！！
如有什么需要可以私信
如有什么需要可以私信
如果有任何问题私信没有及时回复小伙伴们可以添加以下微信号咨询：
微信号：ych520cyy
一般都会回复和指导大家的，祝所有小情侣都能天天快快乐乐的哟
扫一扫
851
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
