js制作动态小火箭

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

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

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

1.先添加火箭图片，并让其居中

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <title>Document</title>
 8     <link rel="stylesheet" href="rocket.css">
 9 </head>
10 <body>
11     <div class="container">
12         <div class="rocket"><img src="../image/火箭.png" alt=""></div>
13     </div>
14 </body>
15 </html>

这里的火箭图标大家可以去一些图标网进行下载，我用的是https://www.iconfont.cn


.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<num;i++){
               //创建i元素
               const i=document.createElement("i");
               i.style.height = rand(30,100)+"px";
            //    vw和vh是css3中提出的，vh是视图高度的百分比，vw是视图宽度的百分比
               i.style.left = rand(1,99)+"vw";
               i.style.animationDuration=rand(5,30)/10+"s";
               //将i元素插入到container中
               document.querySelector(".container").appendChild(i);
       }

在这里将新生成的标签的样式进行更改，将标签的高度以及它距离左侧的距离、以及从顶部到底部的时间在一定范围内进行随机生成。

最后将新生成的标签添加到container中去。

进行到这里我们基本上就算是完成了，后面可以根据我们的想法去添加其它的一些样式，比如在火箭内部加上自己的名字，或者是点击按钮就让火箭产生一个升空效果等，

其它新奇的想法还需要我们大家去探讨

文章最后我将代码放在这里，有需要的可以直接拿去：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="rocket.css">
    <title>rocket</title>
</head>
<body>
   <div class="container">
       <div class="rocket"><span>赵日天号</span><img src="../image/火箭.png" alt="" ></div>
       <i></i>
       <script>
           //随机数
           function rand(m,n){
               return Math.ceil(Math.random()*(n-m+1)+m-1);
           }
           //光线的总数t
           var num=40;
           for(var i=0;i<num;i++){
               //创建i元素
               const i=document.createElement("i");
               i.style.height = rand(30,100)+"px";
            //    vw和vh是css3中提出的，vh是视图高度的百分比，vw是视图宽度的百分比
               i.style.left = rand(1,99)+"vw";
               i.style.animationDuration=rand(5,30)/10+"s";
               //将i元素插入到container中
               document.querySelector(".container").appendChild(i);
           }
        
       </script>
   </div>
</body>
</html>

html

*{
    margin: 0;
    padding: 0;
}
.container{
    height: 100vh;
    background-color: rgb(56, 50, 50);
    display: flex;
    justify-content: center;
    align-items: center;
}
.container .rocket{
    position: relative;
    animation:upDown 200ms linear infinite alternate;
}
@keyframes upDown{
    from{
        transform: translateY(-4px);
    }
    to{
        transform: translateY(4px);
    }
}

.container .rocket span{
   position: absolute;
   /* 实现上下居中 */
  top: 50%;
   transform: translateY(-70%);
   left: 46%;
   width: 15px;
    font-size: 14px;
    color: rgb(223, 210, 21);
  
}
.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;
}
.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);
    }
}

css

进行到这里我们基本上就算是完成了，后面可以根据我们的想法去添加其它的一些样式，比如在火箭内部加上自己的名字，或者是点击按钮就让火箭产生一个升空效果等，其它新奇的想法还需要我们大家去探讨

posted @ 2021-03-09 17:56 含若飞阅读(328) 评论(0) 编辑收藏举报

刷新页面返回顶部