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

JS实现的小火箭发射动画效果示例

• JavaScript

JS实现的小火箭发射动画效果是一种常见的动态效果，通常在网页中应用较多。以下是该效果的完整攻略：

实现思路

  1. 使用HTML和CSS创建火箭图形和发射台。
  2. 使用JavaScript实现动画效果。
  3. 整合HTML、CSS和JS，将动画集成到网页中。

创建HTML结构

首先，我们需要在HTML中创建火箭和发射台的DOM结构。示例代码如下：

<div class="rocket-container">
  <div class="rocket-body"></div>
  <div class="rocket-fire"></div>
</div>
<div class="launchpad"></div>

上面的代码中，rocket-container代表火箭的整体容器，rocket-body代表火箭的主体部分，rocket-fire代表火箭的发射火焰部分，launchpad代表发射台。

添加CSS样式

接下来，我们需要用CSS来创建火箭和发射台的样式。示例代码如下：

.rocket-container {
  position: relative;
  width: 100px;
  height: 180px;
  margin: 0 auto;
}

.rocket-body {
  position: absolute;
  top: 10px;
  left: 18px;
  width: 64px;
  height: 100px;
  background-color: #fff;
  border-radius: 50px 50px 0 0;
}

.rocket-fire {
  position: absolute;
  bottom: -50px;
  left: 28px;
  width: 44px;
  height: 90px;
  background-color: #f60;
  border-radius: 0 0 35px 35px;
}

.launchpad {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 100px;
  height: 20px;
  background-color: #999;
  transform: translateX(-50%);
  border-radius: 15px;
}

上述代码中，我们使用了position属性来设置元素的定位，width和height属性来设置元素的长宽，background-color属性来设置元素的背景颜色，border-radius属性来设置元素的圆角样式，transform属性来设置元素的位移位置。

添加JavaScript动画

最后，我们需要使用JavaScript实现火箭的发射动画效果。示例代码如下：

// 获取DOM元素
const rocketContainer = document.querySelector('.rocket-container');
const rocketBody = document.querySelector('.rocket-body');
const rocketFire = document.querySelector('.rocket-fire');

// 添加发射动画
function launchRocket() {
  // 火箭起飞动画
  rocketContainer.style.animation = 'launch 3s ease-out';
  rocketBody.style.animation = 'shake 1s ease-in-out';
  rocketFire.style.animation = 'fire 1s ease-in-out';

  // 防止重复点击
  setTimeout(() => {
    rocketContainer.style.animation = '';
    rocketBody.style.animation = '';
    rocketFire.style.animation = '';
  }, 3000);
}

// 监听鼠标点击事件
const launchpad = document.querySelector('.launchpad');
launchpad.addEventListener('click', launchRocket);

上述代码中，在launchRocket函数中，我们为rocket-container、rocket-body和rocket-fire添加了发射动画样式，并指定了对应的动画时间和缓动效果。在动画结束后，我们用setTimeout函数清除了动画样式，防止重复点击。最后，我们使用addEventListener函数，为launchpad元素添加了点击监听事件，触发launchRocket函数，来实现动画效果。

示例说明

以下是两个针对不同场景的示例说明：

示例1：基本火箭发射动画效果

该示例是最基本的火箭发射动画效果，只包含一个火箭和一个发射台。用户点击发射台上的按钮，即可触发火箭的发射动画。可以通过样式调整来改变火箭和发射台的大小和颜色。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>基本火箭发射动画效果示例</title>
    <style>
      .rocket-container {
        position: relative;
        width: 100px;
        height: 180px;
        margin: 0 auto;
      }

      .rocket-body {
        position: absolute;
        top: 10px;
        left: 18px;
        width: 64px;
        height: 100px;
        background-color: #fff;
        border-radius: 50px 50px 0 0;
      }

      .rocket-fire {
        position: absolute;
        bottom: -50px;
        left: 28px;
        width: 44px;
        height: 90px;
        background-color: #f60;
        border-radius: 0 0 35px 35px;
      }

      .launchpad {
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 100px;
        height: 20px;
        background-color: #999;
        transform: translateX(-50%);
        border-radius: 15px;
      }
    </style>
  </head>
  <body>
    <div class="rocket-container">
      <div class="rocket-body"></div>
      <div class="rocket-fire"></div>
    </div>
    <div class="launchpad">
      <button>发射</button>
    </div>
    <script>
      const rocketContainer = document.querySelector('.rocket-container');
      const rocketBody = document.querySelector('.rocket-body');
      const rocketFire = document.querySelector('.rocket-fire');

      function launchRocket() {
        rocketContainer.style.animation = 'launch 3s ease-out';
        rocketBody.style.animation = 'shake 1s ease-in-out';
        rocketFire.style.animation = 'fire 1s ease-in-out';

        setTimeout(() => {
          rocketContainer.style.animation = '';
          rocketBody.style.animation = '';
          rocketFire.style.animation = '';
        }, 3000);
      }

      const launchButton = document.querySelector('button');
      launchButton.addEventListener('click', launchRocket);
    </script>
  </body>
</html>

示例2：多重火箭发射动画效果

该示例是多个火箭同时发射的动画效果，照片墙展示风格的网页在点击图片时，伴随火箭飞往云彩，效果非常华丽。用户点击任何一张图片，即可触发火箭的发射动画。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>多重火箭发射动画效果示例</title>
    <style>
      .rocket-container {
        position: relative;
        width: 100px;
        height: 180px;
        margin: 0 auto;
      }

      .rocket-body {
        position: absolute;
        top: 10px;
        left: 18px;
        width: 64px;
        height: 100px;
        background-color: #fff;
        border-radius: 50px 50px 0 0;
      }

      .rocket-fire {
        position: absolute;
        bottom: -50px;
        left: 28px;
        width: 44px;
        height: 90px;
        background-color: #f60;
        border-radius: 0 0 35px 35px;
      }

      .launchpad {
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 100px;
        height: 20px;
        background-color: #999;
        transform: translateX(-50%);
        border-radius: 15px;
      }

      .photo {
        position: relative;
        width: 200px;
        height: 200px;
        margin: 20px;
        float: left;
      }

      .photo img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
      }
    </style>
  </head>
  <body>
    <div class="rocket-container" id="rocket-1">
      <div class="rocket-body"></div>
      <div class="rocket-fire"></div>
    </div>
    <div class="rocket-container" id="rocket-2">
      <div class="rocket-body"></div>
      <div class="rocket-fire"></div>
    </div>
    <div class="rocket-container" id="rocket-3">
      <div class="rocket-body"></div>
      <div class="rocket-fire"></div>
    </div>
    <div class="launchpad"></div>
    <div class="photo" id="photo-1">
      <img src="https://picsum.photos/seed/1/200/200">
    </div>
    <div class="photo" id="photo-2">
      <img src="https://picsum.photos/seed/2/200/200">
    </div>
    <div class="photo" id="photo-3">
      <img src="https://picsum.photos/seed/3/200/200">
    </div>
    <script>
      const rocket1 = newRocket('rocket-1');
      const rocket2 = newRocket('rocket-2');
      const rocket3 = newRocket('rocket-3');

      function newRocket(id) {
        const rocketContainer = document.getElementById(id);
        const rocketBody = rocketContainer.querySelector('.rocket-body');
        const rocketFire = rocketContainer.querySelector('.rocket-fire');

        function launchRocket() {
          rocketContainer.style.animation = 'launch 3s ease-out';
          rocketBody.style.animation = 'shake 1s ease-in-out';
          rocketFire.style.animation = 'fire 1s ease-in-out';

          setTimeout(() => {
            rocketContainer.style.animation = '';
            rocketBody.style.animation = '';
            rocketFire.style.animation = '';
          }, 3000);
        }

        return launchRocket;
      }

      const photo1 = document.getElementById('photo-1');
      const photo2 = document.getElementById('photo-2');
      const photo3 = document.getElementById('photo-3');

      photo1.addEventListener('click', rocket1);
      photo2.addEventListener('click', rocket2);
      photo3.addEventListener('click', rocket3);
    </script>
  </body>
</html>

上述代码中，在newRocket函数中，我们动态创建了随点击不同而触发不同的发射器，提供了多重火箭的功能。每个发射器在触发时，会执行与单一发射器相同的发射动画效果。通过多个图片点击触发不同的发射器，实现了多个火箭同时发射的动画效果。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS实现的小火箭发射动画效果示例 - Python技术站

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

相关文章

  • JS在浏览器中解析Base64编码图像

    在浏览器中解析Base64编码图像可以使用JavaScript来实现，下面是实现的步骤和相应的示例代码。 1. 将Base64编码字符串转换为Blob对象 使用atob()函数将Base64编码字符串转换为二进制数据，然后将其转换为Blob对象。 // 示例1：将Base64编码字符串转换为Blob对象 const base64 = ‘data:image/…

    JavaScript 2023年5月19日
    00

  • javascript中setAttribute()函数使用方法及兼容性

    下面是关于JavaScript中setAttribute()函数的使用方法及兼容性的完整攻略： 一、语法概述 setAttribute()函数是一种在HTML和XML文档中设置属性的方法。它有两个参数： 属性名：要设置的属性名称 属性值：要设置的属性值 使用语法如下所示： element.setAttribute(attributeName, attribu…

    JavaScript 2023年5月27日
    00

  • html的DOM中document对象images集合用法实例

    下面是关于“HTML的DOM中document对象images集合用法实例”的完整攻略： 什么是DOM中的document对象images集合 在HTML的DOM中，每个图片元素都被定义为标签。而通过document对象的images集合，我们可以获取到文档中的所有图片元素，并对其进行一系列的操作，比如更改图片路径、设置图片样式等等。 document对象i…

    JavaScript 2023年6月10日
    00

  • JavaScript 是什么意思

    JavaScript 是一种高级的、弱类型的编程语言，经常用于 Web 前端开发以及服务器端开发。它被设计成一种脚本语言，可以在 Web 页面上直接嵌入 HTML 代码中，也可以在服务器上运行。JavaScript 使得 Web 页面变得更加动态化和交互式。 JavaScript 的语法类似于其他编程语言，如 C、Python 和 Java。它支持基本的数据…

    JavaScript 2023年5月17日
    00

  • window.location 对象所包含的属性

    前端开发中常用到window.location对象，该对象包含了当前页面的URL信息。下面详细讲解window.location对象所包含的属性及其作用： window.location.href window.location.href返回当前页面的URL地址，也可以修改该属性来跳转页面。 示例1： //返回当前页面URL console.log(wind…

    JavaScript 2023年6月11日
    00

  • js正则格式化日期时间自动补0的两种解法

    下面是“js正则格式化日期时间自动补0的两种解法”的完整攻略。 步骤一：获取日期时间值 首先，我们需要获取日期时间的值，通常可以用 Date 对象。 const date = new Date(); 解法一：使用 String.prototype.padStart() String.prototype.padStart() 是 ES2017 中新增的方法，可…

    JavaScript 2023年5月27日
    00

  • javascript AOP 实现ajax回调函数使用比较方便

    下面是详细讲解“javascript AOP 实现ajax回调函数使用比较方便”的完整攻略： 什么是AOP AOP（Aspect Oriented Programming），面向切面编程，是一种编程风格，可以将一些特定的行为切入到原本的业务逻辑执行流程中，使业务逻辑代码专注于业务本身，而将其他非业务代码分离出去。 在JavaScript中，AOP的实现方式主…

    JavaScript 2023年6月11日
    00

  • javascript 封装Date日期类实例详解

    Javascript 封装 Date 日期类实例详解 在 Javascript 中，Date 类是表示日期和时间的对象，Date 有多种构造函数和方法，可以根据需求获取、设置日期或时间，也可以将日期对象转换为字符串。 创建 Date 对象 可以使用 new Date() 构造函数创建 Date 对象，如果没有传递参数，则创建当前日期和时间的 Date 对象。…

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