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

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

• JavaScript
yizhihongxing

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日

相关文章

  • WEB前端常见受攻击方式及解决办法总结

    WEB前端常见受攻击方式及解决办法总结 1. XSS攻击 XSS攻击（Cross-site scripting）是指攻击者在网站中插入恶意的脚本代码，使用户的浏览器执行攻击者所构造的恶意代码，从而达到攻击的目的。常见的XSS攻击手段包括反射型XSS和存储型XSS两种，攻击者通过在URL中注入恶意代码或者将恶意代码存储在网站数据库中来实现攻击。 解决方案： 对…

    JavaScript 2023年6月11日
    00

  • JS 文件本身编码转换 图文教程

    下面为您详细讲解“JS 文件本身编码转换 图文教程”的完整攻略。 背景 当我们在编写JavaScript文件时，有时候文件的编码格式与我们所需要的格式不一致，这时就需要进行编码转换，以确保文件在不同平台和浏览器中的正确展示。 方法 文件编码转换有多种方法，本文将主要介绍两种方法。 方法一：使用VSCode 在VSCode中，我们可以通过如下步骤进行文件编码转…

    JavaScript 2023年5月20日
    00

  • 一文了解什么是TypeScript?

    一文了解什么是TypeScript? 什么是TypeScript? TypeScript 是一种由微软开发和维护的自由和开源的编程语言，是 JavaScript 的一个超集，在 JavaScript 基础上添加了静态类型和其他特性。TypeScript 在许多方面都可以增强 JavaScript 的能力，并且还可以提高代码的可读性和可维护性。 TypeScr…

    JavaScript 2023年5月28日
    00

  • javascript实现图片轮播简单效果

    下面是“javascript实现图片轮播简单效果”的完整攻略： 1. 准备工作 在开始实现图片轮播前，需要先准备好相关的HTML代码、CSS样式和JavaScript脚本。具体的操作如下： 1.1 HTML代码 首先，在HTML文件中添加一个包含图片的容器，例如： <div class="slideshow"> <img…

    JavaScript 2023年6月11日
    00

  • 转换字符串为json对象的方法详解

    当我们从外部获取到一个字符串，而这个字符串是符合json格式的，那么这个时候我们需要将这个字符串转换成json对象，方便我们在程序中处理数据。 下面是几种常见的将字符串转换为json对象的方法： 使用JSON.parse(string) JSON.parse() 是 JavaScript 中的一个内置函数，可以将一个符合 JSON 格式的字符串转化为 JSO…

    JavaScript 2023年5月27日
    00

  • layui 表单标签的校验方法

    请看下面的攻略，包含了layui 表单标签的校验方法的详细讲解和示例说明。 layui 表单标签的校验方法 什么是layui表单标签的校验方法 layui是一套基于jQuery的前端UI框架，它提供了一种方法来简化表单的验证功能。 其中，layui.form提供了大量表单组件，并且封装了常用的表单验证规则和方法。我们只需要调用layui的基础方法，就可以完成…

    JavaScript 2023年6月10日
    00

  • javascript 三种数组复制方法的性能对比

    首先，我们需要了解 Javascript 中有哪些常见的数组复制方法以及它们的性能对比。常见的数组复制方法包括： 使用 slice() 方法复制数组 使用展开运算符 … 进行复制 使用 Array.from() 方法进行复制 接下来，我们将分别介绍这三种方法的具体实现及性能测试。 使用 slice() 方法复制数组 slice() 方法可以从已有的数组中…

    JavaScript 2023年5月27日
    00

  • JavaScript Event学习第七章 事件属性

    下面给你详细讲解 JavaScript Event 学习第七章 事件属性的完整攻略。 事件属性 事件属性是针对事件对象提供的属性，通过这些属性可以获取事件的各种信息。下面是常见的事件属性： 1. type type属性用于返回事件类型，是必需的。例如： element.addEventListener(‘click’, function(event) { c…

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