1.作品介绍
开场用来表白或者道歉,后边来一场绚丽的烟花吧,烟花炸裂弹出文字,
所有文字皆可自定义,也可添加背景音乐,无需部署,打开即用!
2.效果图
告白绚烂烟花
3.部分代码
在这里插入代码片`<!--author:zhaotao-->
<!DOCTYPE html>
<html 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="jquery.min.js"
></script>
<style>
html,
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: black;
user-select: none;
margin: 0;
}
.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="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" onclick="myPlay()"><span>原谅</span></div>
</div>
<div id="no" class="btn btn-b" onclick="myPlay()"><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"></div>-->
<div class="shape">爱自己❤</div>
<div class="shape">一生一世</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>
<script src="jquery.min.js"></script>
<script src="fire.js"></script>
<script src="talk.js"></script>
</body>
</html>
`
4.源码获取(可关注↓公众号 :获取更多源码 !)
公众号搜索 “Java进步”,或者扫描以下二维码,回复 : “唯美源码” 获取源码
关注公众号,随时学习最新内容,并与博主零距离交流!