1. Python技术站首页
  2. 其他
  3. JavaScript

基于Html+CSS+JS实现手动放烟花效果

• JavaScript

下面我将为您详细讲解基于Html+CSS+JS实现手动放烟花效果的完整攻略。

需求分析

为了实现手动放烟花效果，需要实现以下功能：

  1. 通过点击页面添加烟花；
  2. 每个烟花需要有不同的颜色和大小；
  3. 烟花需要能够在页面上随机位置爆炸，并播放烟花爆炸动画；
  4. 烟花爆炸效果需要自动消失，不占用页面空间；
  5. 页面需要考虑到不同的屏幕大小，能够自适应。

技术实现

HTML

在 HTML 中，我们需要先创建一个空的容器，用于放置烟花。这个容器可以是一个 div，例如：

<div id="fireworks-container"></div>

CSS

对于 CSS，我们可以给烟花容器设置一些基本样式，例如：

#fireworks-container {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.9);
}

这里采用了 fixed 定位，使容器始终位于页面顶部，而 background-color 则是用来遮盖页面内容，突出烟花效果。接下来，我们需要创建烟花的样式。

.firework {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: explode 1s ease-out;
  animation-fill-mode: forwards;
}

@keyframes explode {
  to {
    width: 200px;
    height: 200px;
    opacity: 0;
  }
}

这段代码定义了烟花的样式，给它们设置了位置、大小、边框圆角。接下来通过 keyframes 创建烟花爆炸动画，其中 to 关键字表示在动画结束时的状态。可以看到，最终的状态是将烟花放大并透明度降至零，直至消失。

JavaScript

在 JavaScript 中，我们需要编写代码实现烟花的生成、爆炸和消失。

生成烟花

首先，我们需要在页面中添加点击事件，当用户点击时就会在页面上添加一个烟花。

document.addEventListener('click', function(event) {
  createFirework(event.clientX, event.clientY);
});

在点击事件中，我们调用了 createFirework 函数，传入事件的坐标参数，例如：

function createFirework(x, y) {
  var firework = document.createElement('div');
  firework.className = 'firework';
  firework.style.left = x + 'px';
  firework.style.top = y + 'px';
  firework.style.backgroundColor = getRandomColor();
  firework.style.animationDuration = getRandomNumber(1, 2) + 's';

  document.getElementById('fireworks-container').appendChild(firework);

  // 等待烟花爆炸结束后再将其从页面移除
  setTimeout(function() {
    firework.parentNode.removeChild(firework);
  }, 2000);
}

createFirework 函数实现了烟花的生成，它使用了 createElement 创建一个 div，设置了其类名（即之前定义的 firework）、位置和颜色。这里的 getRandomColor 和 getRandomNumber 是辅助函数，用来随机生成颜色和大小。最后，我们将烟花加入到容器中，通过 setTimeout 来控制烟花爆炸动画的时间，并在爆炸结束后将其从页面中移除。

随机生成烟花颜色和大小

function getRandomNumber(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function getRandomColor() {
  var r = getRandomNumber(0, 255);
  var g = getRandomNumber(0, 255);
  var b = getRandomNumber(0, 255);

  return 'rgb(' + r + ', ' + g + ', ' + b + ')';
}

getRandomNumber 和 getRandomColor 都是简单的取随机数和生成随机颜色的函数。

烟花爆炸动画

最后是烟花爆炸动画的实现。我们已经在 CSS 中定义了爆炸动画效果，但需要通过 JS 来触发它。我们可以通过检测动画结束事件来判断烟花是否爆炸结束，并在结束后将其从页面中移除。这个事件可以通过监听 transitionend 事件来实现。

firework.addEventListener('transitionend', function() {
  firework.parentNode.removeChild(firework);
});

示例说明

示例1

下面是一个简单的示例，点击页面会随机生成大小不同的烟花，烟花会在随机位置爆炸。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>手动放烟花效果</title>
  <style>
    #fireworks-container {
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 9999;
      background-color: rgba(0, 0, 0, 0.9);
    }

    .firework {
      position: absolute;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      transform: translate(-50%, -50%);
      animation: explode 1s ease-out;
      animation-fill-mode: forwards;
    }

    @keyframes explode {
      to {
        width: 200px;
        height: 200px;
        opacity: 0;
      }
    }
  </style>
</head>
<body>
<div id="fireworks-container"></div>
<script>
  document.addEventListener('click', function(event) {
    createFirework(event.clientX, event.clientY);
  });

  function createFirework(x, y) {
    var firework = document.createElement('div');
    firework.className = 'firework';
    firework.style.left = x + 'px';
    firework.style.top = y + 'px';
    firework.style.backgroundColor = getRandomColor();
    firework.style.animationDuration = getRandomNumber(1, 2) + 's';

    document.getElementById('fireworks-container').appendChild(firework);

    // 等待烟花爆炸结束后再将其从页面移除
    firework.addEventListener('transitionend', function() {
      firework.parentNode.removeChild(firework);
    });
  }

  function getRandomNumber(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }

  function getRandomColor() {
    var r = getRandomNumber(0, 255);
    var g = getRandomNumber(0, 255);
    var b = getRandomNumber(0, 255);

    return 'rgb(' + r + ', ' + g + ', ' + b + ')';
  }
</script>
</body>
</html>
示例2

下面是一个稍微高级一点的示例，除了生成烟花外，还包括了烟花爆炸时的声音，以及只在指定区域内生成烟花。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>手动放烟花效果</title>
  <style>
    #fireworks-container {
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 9999;
      background-color: rgba(0, 0, 0, 0.9);
    }

    .firework {
      position: absolute;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      transform: translate(-50%, -50%);
      animation: explode 1s ease-out;
      animation-fill-mode: forwards;
    }

    @keyframes explode {
      to {
        width: 200px;
        height: 200px;
        opacity: 0;
      }
    }
  </style>
</head>
<body>
<div id="fireworks-container"></div>
<script>
  // 在指定区域内生成烟花
  var container = document.getElementById('fireworks-container');
  container.addEventListener('click', function(event) {
    if (event.target == container) {
      createFirework(event.clientX, event.clientY);
      playSound();
    }
  });

  // 生成烟花
  function createFirework(x, y) {
    var firework = document.createElement('div');
    firework.className = 'firework';
    firework.style.left = x + 'px';
    firework.style.top = y + 'px';
    firework.style.backgroundColor = getRandomColor();
    firework.style.animationDuration = getRandomNumber(1, 2) + 's';

    container.appendChild(firework);

    // 等待烟花爆炸结束后再将其从页面移除
    firework.addEventListener('transitionend', function() {
      firework.parentNode.removeChild(firework);
    });
  }

  // 播放声音
  function playSound() {
    var audio = new Audio('sound.mp3');
    audio.play();
  }

  function getRandomNumber(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }

  function getRandomColor() {
    var r = getRandomNumber(0, 255);
    var g = getRandomNumber(0, 255);
    var b = getRandomNumber(0, 255);

    return 'rgb(' + r + ', ' + g + ', ' + b + ')';
  }
</script>
</body>
</html>

这个示例加入了播放音频的功能，需要在 HTML 中引入 sound.mp3 文件。除此之外，我们还通过检测事件的目标元素，只在容器区域内生成烟花。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：基于Html+CSS+JS实现手动放烟花效果 - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年6月11日
下一篇 2023年6月11日

相关文章

  • JS匿名函数类生成方式实例分析

    JS匿名函数类生成方式是指通过使用匿名函数的方式创建JS类，使得该类的定义与创建同时进行，并在全局作用域中生效。这种方式的优点是可以防止类命名污染和作用域冲突，同时也可以封装类的内部实现。 下面是一个JS匿名函数类的示例代码： var someClass = (function() { var privateVariable = 10; function p…

    JavaScript 2023年5月27日
    00

  • 详解vue-router 2.0 常用基础知识点之router.push()

    详解vue-router 2.0常用基础知识点之router.push() 1. 概述 router.push()是vue-router 2.0的一种基础跳转方式，用于在当前路由下添加一个新路由，并且将浏览器URL跳转到新路由地址，这是vue-router中最常用的一种跳转方式之一。 2. 语法 router.push(location, onComplet…

    JavaScript 2023年6月11日
    00

  • 利用js来实现缩略语列表、文献来源链接和快捷键列表

    要实现缩略语列表、文献来源链接和快捷键列表的功能，可以使用一些JavaScript库和工具来完成，常见的包括jQuery和Bootstrap等。 缩略语列表 Markdown中可以通过使用缩略语的方式来节约篇幅。可以使用JavaScript来添加一个缩略语列表，让用户能够快速查看和了解所有的缩略语含义。 实现步骤： （1）首先需要在Markdown文档中定义…

    JavaScript 2023年6月10日
    00

  • JS中改变this指向的方法(call和apply、bind)

    JS中的函数中会有一个特殊的变量this，它代表当前函数的执行上下文。但是，由于JS是一门动态语言，函数都可以作为变量进行传递和赋值，那么函数内的this指向就可能会出现变化。在这种情况下，我们需要改变函数内this的指向，以确保函数能够正常执行。而JS中改变this指向的方法主要有三种，分别是call、apply和bind。 call call() 方法可…

    JavaScript 2023年6月10日
    00

  • 前端中的JS使用调试技巧

    下面介绍一下“前端中的JS使用调试技巧”的完整攻略： 检查代码 在JS开发过程中，一些普遍的错误是输错单词，缺少/多写了一个符号，语法错误等。这些问题都可以通过检查代码来解决。下面是一些检查代码的技巧： 1. 使用Console 使用Console进行 debug 是最基本的调试方法之一。Console 是一个在浏览器中开发人员工具里的选项卡，它允许开发人员…

    JavaScript 2023年5月18日
    00

  • utf-8编码引起js输出中文乱码的解决办法

    下面是关于“utf-8编码引起js输出中文乱码”的解决办法的完整攻略。 问题描述 当我们在使用 JavaScript 输出中文时，如果页面的编码方式为 utf-8，那么经常会出现中文乱码的问题。就算页面的编码设置正确且合法，但还是无法避免可能遇到的中文输出乱码问题。接下来我们将介绍如何解决这个问题。 解决办法 一个常见的解决方法是将需要输出的中文字符转为 u…

    JavaScript 2023年5月20日
    00

  • JavaScript中操作字符串小结

    下面是对于“JavaScript中操作字符串小结”的完整攻略： JavaScript字符串操作小结 在JavaScript中，字符串是一种表示文本的数据类型。当我们想要在编程中操作文本数据时，字符串就成为了非常重要的一种数据类型。同时，JavaScript也提供了很多方便的API来帮助我们处理字符串。本文将会总结一些常用的字符串操作方法，帮助大家高效地处理字…

    JavaScript 2023年5月18日
    00

  • 原生JS获取元素的位置与尺寸实现方法

    获取元素位置和尺寸信息是web开发中经常需要面对的问题。下面是一些原生JS获取元素位置和尺寸的方法。在示例中，我们将使用一个html文档和一个div元素作为示例。 获取元素位置 offsetTop和offsetLeft属性 在HTML文档中，每个元素都有offsetTop和offsetLeft属性，它们表示元素相对于其offsetParent（父元素）的顶部…

    JavaScript 2023年6月11日
    00
合作推广
合作推广
分享本页
返回顶部