js制作动态小火箭

2024-06-14 21:23| 来源: 网络整理| 查看: 265

今天就给大家分享一下用js制作的小火箭，内容简单，比较适合新手。

首先给大家展示一下具体的效果，效果如图所示

在这里插入图片描述

从图中可以看到一个火箭运动的效果，通过分析后可以发现图中的元素主要就是一个上下运动的火箭以及不断下落的光线。火箭包括了底下的火焰以及内部的文字，火箭整体是呈现上下规则运动，光线则是随机不同速从顶部到底部。页面的主体元素主要就是这些。下面开始我们的具体操作：

1.先添加火箭图片，并设置css样式让其居中

Document

这里的火箭图标大家可以去一些图标网进行下载，我用的是阿里巴巴矢量图标库 css设置居中样式

.container{ height: 100vh; background-color: rgb(56, 50, 50); display: flex; justify-content: center; align-items: center; }

（这里要注意的是vh和vw两个单位，这两个是css3中的单位，类似于百分比，vh为高度，vw为宽度

vh100相当于height=100% ，vw相当于width=100%。在这里需要注意的是两者是有差别的，不可划等号）

2.让火箭上下动起来在这里就需要用到 css3中的动画函数 animation 设置让他0.2s内完成一次运动，并且匀速重复，按照原路径返回

.container .rocket{ position: relative; animation:upDown 200ms linear infinite alternate; } @keyframes upDown{ from{ transform: translateY(-4px); } to{ transform: translateY(4px); } }

3.给火箭添加火焰首先利用伪类给代码火箭末尾添加一个火焰状的div，并用线性渐变给火焰设置一个颜色变化，这里给火焰设置position: absolute; 是为了后面对火焰的颜色调整比较方便一点（这里需要注意的是让其居中的方法，首先让一条边距离为50%，然后再使用 transform:translateX(-50%) 让其再返回去自身的50%，这样就可以达到居中的效果同样的我们让其上下居中也可以采用这种方式）

.container .rocket::after{ content: " "; width: 10px; height: 150px; background: linear-gradient(red,yellow,transparent); position: absolute; /* 这里加居中，先让某一条边到达50% 然后再让他translateX(-50%) ,即向左偏移自身的一半就达到居中，同样的上下居中也可以按照这种方式 top:50%; transform:transformY(-50%); */ left: 50%; transform: translateX(-50%); bottom: -146px; }

4.添加光线火箭部分已经设计完毕，接下来就是光线的效果，我们可以发现光线是从上往下，光线的长度是随机的，并且随机从顶部出现，随机出现在屏幕顶部的某一位置，光线从顶部到底部的时间也是在某一范围内随机的。

这样我们就应该会想到这里的使用方法，随机让其在顶部的某一位置产生一个宽度很小，长度不等的标签，从顶部到底部的时间随机，我们在这里可以用标签，既然思路有了，那做起来就很容易了。

.container i{ width: 1px;/* 宽度我们固定为1 */ height: 20px; /* 高度让其随机生成，为25-100 */ position: absolute; left: 20px; /*1-99*/ top: 30px; /*高度在这里固定为0，默认都从屏幕上方进入*/ background-color: #fff; animation: line 3s linear infinite ; } @keyframes line{ from{ transform: translateY(0); } to{ transform: translateY(80vh); } }

5.添加随机函数

function rand(m,n){ return Math.ceil(Math.random()*(n-m+1)+m-1); 　　　　　　　　　　　} 随机生成 [m,n] 的数字，后面我们可以直接使用

6.将生成的标签添加到container中

{ //光线的总数t var num=40; for(var i=0;i

【本文地址】

公司简介

联系我们