devbox
AllinToyou
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

如何使用html+css+js 实现动态新年烟花特效及服务器部署_html 新年特效

作者：AllinToyou | 2024-02-16 04:51:41

赞

踩

html 新年特效

前言

不知不觉又到了年底，这一年是值得庆贺的一年，疫情过去，经济好转。我们急需在春节这个特殊的日志释放下自己的情绪。但是大部分地区都不让放炮，于是乎我为大家带来一套十分炫酷应景的春节烟花动画代码实现。效果如下图所示 :
在这里插入图片描述

1、实现代码

具体是如何实现的呢，下面我们上代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>烟花特效</title>

  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="theme-color" content="#000000">
  <link rel="shortcut icon" type="image/png"
    href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/329180/firework-burst-icon-v2.png">
  <link rel="icon" type="image/png"
    href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/329180/firework-burst-icon-v2.png">
  <link rel="apple-touch-icon-precomposed"
    href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/329180/firework-burst-icon-v2.png">
  <meta name="msapplication-TileColor" content="#000000">
  <meta name="msapplication-TileImage"
    content="https://s3-us-west-2.amazonaws.com/s.cdpn.io/329180/firework-burst-icon-v2.png">
  <link href="static/css/css.css" rel="stylesheet">
  <link rel="stylesheet" href="static/css/reset.min.css">
  <link rel="stylesheet" href="static/css/style.css">
  <script src="https://wechat-small-app.oss-cn-hangzhou.aliyuncs.com/bbp/yh/js/lib/jquery.min.js"
    type="text/javascript"></script>
  <script>
    var shouci = true;
    console.log(shouci);
    function bodyPlayMusic () {
      if (shouci) {
        shouci = false;
        audio.play();
        console.log(shouci);
      }
    };
  </script>
</head>

<body>


  
  <div id="yhBtn"
    style="position:fixed;top:0;left:0;width:100%;height:100%;z-index:999;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#fff ; font-size:15px    ">
    <p>
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/90867
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。