JS实现的小火箭发射动画效果示例 |
您所在的位置：网站首页 › 火箭发射动画片儿 › JS实现的小火箭发射动画效果示例 |
JS实现的小火箭发射动画效果示例
|
JS实现的小火箭发射动画效果是一种常见的动态效果，通常在网页中应用较多。以下是该效果的完整攻略： 实现思路 使用HTML和CSS创建火箭图形和发射台。 使用JavaScript实现动画效果。 整合HTML、CSS和JS，将动画集成到网页中。 创建HTML结构首先，我们需要在HTML中创建火箭和发射台的DOM结构。示例代码如下： 上面的代码中，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：基本火箭发射动画效果该示例是最基本的火箭发射动画效果，只包含一个火箭和一个发射台。用户点击发射台上的按钮，即可触发火箭的发射动画。可以通过样式调整来改变火箭和发射台的大小和颜色。 基本火箭发射动画效果示例 .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; } 发射 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); 示例2：多重火箭发射动画效果该示例是多个火箭同时发射的动画效果，照片墙展示风格的网页在点击图片时，伴随火箭飞往云彩，效果非常华丽。用户点击任何一张图片，即可触发火箭的发射动画。 多重火箭发射动画效果示例 .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; }上述代码中，在newRocket函数中，我们动态创建了随点击不同而触发不同的发射器，提供了多重火箭的功能。每个发射器在触发时，会执行与单一发射器相同的发射动画效果。通过多个图片点击触发不同的发射器，实现了多个火箭同时发射的动画效果。 本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS实现的小火箭发射动画效果示例 - Python技术站 |
【本文地址】