炫酷的表白烟花 html+css+js实现的表白烟花特效(程序员专属情人节表白网站)

原创

@码出未来④-web网页设计 2022-10-16 01:37:27 ©著作权

文章标签 web web课程与设计 web前端期末大作业前端网页设计与制作 文章分类 OpenStack 云计算

©著作权归作者所有：来自51CTO博客作者@码出未来④-web网页设计的原创作品，请联系作者获取转载授权，否则将追究法律责任

七夕来袭！是时候展现专属于程序员的浪漫了！你打算怎么给心爱的人表达爱意？鲜花礼物？代码表白？还是创意DIY？或者…无论那种形式，快来秀我们一脸吧！

📂文章目录

二、📚网站介绍
三、🔗网站效果

▶️1.视频演示
🧩 2.图片演示

四、💒 网站代码

🧱HTML结构代码
🏠CSS样式代码

五、🎁更多源码

二、📚网站介绍

📒网站文件方面：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；

📙网页编辑方面：可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）📜html文件包含：其中index.html是首页、其他html为二级页面；
（2）📑 css文件包含：css全部页面样式,3D动态效果,雪花飘落等等
（3）📄 js文件包含：页面炫酷效果实现

三、🔗网站效果

▶️1.视频演示

51-烟花表白(询问文字开场+自定义文字)

🧩 2.图片演示

炫酷的表白烟花 html+css+js实现的表白烟花特效(程序员专属情人节表白网站)_web

四、💒 网站代码

🧱HTML结构代码

<!--
 * @Author: your name
 * @Date: 2020-12-21 09:07:44
 * @LastEditTime: 2020-12-23 09:11:59
 * @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>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"><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:">
      浏览器不支持canvas
    </canvas>
    <div class="city">
      <img src="img/city.png" alt="" />
    </div>
    <img src="img/moon.png" alt="" id="moon" style="visibility:" />
    <div style="display:">
      <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:"
      src="mp3/blank.mp3"
    ></iframe>
    <script src="jquery.min.js"></script>
    <script src="fire.js"></script>
    <script src="talk.js"></script>
  </body>
</html>

🏠CSS样式代码

* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.share_img {
    width: 0;
    height: 0;
    overflow: hidden;
    opacity: 0;
}

.content {
    /* padding: 80px 20px; */
}

.text_wrapper {
    display: -webkit-box;
    display: flex;
}

.text_wrapper .text {
    padding-top: 20px;
    padding-left: 20px;
}

.hide {
    display: none !important;
}

p {
    margin: 0;
}

.btn-groups {
    padding-right: 20px;
    text-align: center;
}

.heart-btn {
    display: inline-block;
    animation: breath 0.8s linear 0s infinite both;
    -webkit-animation: breath 0.8s linear 0s infinite both;
}

.btn {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 60px;
    margin: 0 30px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

.btn span {
    display: block;
    width: 100%;
    height: 100%;
    line-height: 60px;
    margin-top: -10px;
    margin-left: -10px;
    text-align: center;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

/* 愿意 */

.btn-a {
    background: pink;
}

.btn-b {
    background: #c9c9c9;
}

.btn-a:before {
    content: "";
    position: absolute;
    display: block;
    width: 30px;
    height: 60px;
    background: pink;
    left: -29px;
    border-top-left-radius: 60px;
    border-bottom-left-radius: 60px;
}

.btn-a:after {
    content: "";
    position: absolute;
    display: block;
    width: 60px;
    height: 30px;
    background: pink;
    left: 0;
    top: -29px;
    border-top-left-radius: 60px;
    border-top-right-radius: 60px;
}

.btn-b:before {
    content: "";
    position: absolute;
    display: block;
    width: 30px;
    height: 60px;
    background: #c9c9c9;
    left: -29px;
    top: 0;
    border-top-left-radius: 60px;
    border-bottom-left-radius: 60px;
}

.btn-b:after {
    content: "";
    position: absolute;
    display: block;
    width: 60px;
    height: 30px;
    background: #c9c9c9;
    left: 0;
    top: -29px;
    border-top-left-radius: 60px;
    border-top-right-radius: 60px;
}

.container {}

.container .mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
}

.container .modal {
    width: 50%;
    height: 160px;
    position: absolute;
    top: 55%;
    left: 50%;
    padding: 20px 15px;
    border-radius: 5px;
    /* transform: translate(-50%, -70%); */
    -webkit-transform: translate(-50%, -0%);
    -webkit-transform: translate(-50%, -0%);
    background: #f3f3f3;
}

.container .modal p {
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 16px;
    color: #353535;
    text-align: center;
}

.confirm {
    display: block;
    width: 120px;
    height: 40px;
    margin: 0 auto;
    border: none;
    font-size: 16px;
    border-radius: 5px;
    color: #ffffff;
    background: #f45cae;
}

.type_words {
    padding: 12px 20px;
}

@keyframes {
    0% {
        transform: scale3d(1, 1, 1);
        -webkit-transform: scale3d(1, 1, 1);
        transform-origin: 50% 50%;
    }
    50% {
        transform: scale3d(1.02, 1.02, 1.02);
        -webkit-transform: scale3d(1.02, 1.02, 1.02);
        transform-origin: 50% 50%;
    }
    100% {
        transform: scale3d(1, 1, 1);
        -webkit-transform: scale3d(1, 1, 1);
        transform-origin: 50% 50%;
    }
}

.page_one {
    position: absolute;
    z-index: 10;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -90%);
}

.text {
    color: pink;
    font-size: 16px;
}

.xin {
    width: 20%;
}