html+js+css+canvas 实现烟花表白

最新推荐文章于 2024-06-30 19:18:51 发布

热心码农搬运工

最新推荐文章于 2024-06-30 19:18:51 发布

阅读量1.6k

点赞数 3

分类专栏：前端文章标签： css javascript html5

本文链接：https://blog.csdn.net/m0_60942487/article/details/119964763

版权

作品介绍

爱是一种需要不断被人证明的虚妄,就像烟花需要被点燃才能看到辉煌一样，赶紧把他发给你心爱的人吧。

效果演示

演示地址：http://luoyujin0511.gitee.io/zet/

部分代码

<!--
 * @Author: ruanjiafeng
 * @Date: 2021-03-12 15:21:02
 * @LastEditTime: 2021-03-12 16:24:15
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \canvas颗粒状烟花文本\index.html
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1.0,maximum-scale=1.0"
    />
    <title>canvas颗粒状烟花文本</title>
    <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: 100999;
      }

      .city img {
        width: 100%;
      }

      audio {
        opacity: 0;
      }
      .shape {
        z-index: 9999 !important;
      }
      /* 隐藏烟花 */
      .fireworks {
        display: none;
      }
    </style>
    <link rel="stylesheet" href="css/site.min.css" />
  </head>

  <body>
    <!-- 开场白 -->
    <div class="prologue">
      <canvas class="canvas"></canvas>

      <div class="help">?</div>

      <div class="ui">