程序员表白烟花

祝天下有情人终成眷属

HTML代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <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="./css/modal.css" rel="stylesheet"/>
</head>
<body onselectstart="return false">
<!--对话部分-->
<div class="share_img"><img src="./images/a8b.png" alt=""></div>

<div class="page_one">
    <div class="content">
        <div class="text_wrapper">
            <img src="./images/a8.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)">
    浏览器不支持canvas
</canvas>
<div class="city">
    <img src="./images/city.png" alt="" />
</div>
<img src="./images/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 class="shape">
        I LOVE YOU
    </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="./js/jquery.min.js"></script>
<script src="./js/fire.js"></script>
<script src="./js/talk.js"></script>
</body>
</html>

效果图：

 

 

转至源码地址：https://github.com/junmo-java/firework

转至源码地址：https://gitee.com/lyp_Believer/confession_and_fireworks_code

posted @ 2020-08-27 16:10  star-xin  阅读(839)  评论(0)  编辑  收藏  举报