css小项目编写1-----火箭动态实现

准备开个新栏目，做做b站和github上的特效，尝试复刻一下，同时对于难点会详细讲解一下，喜欢就关注一下我吧~~~。

不废话，先上特效：

然后我们来看一下代码：之后会详细介绍一下难点：

html代码：

<div class="container">
        <div class="rocket">
            <img src="./img/rocket.png" alt="">
        </div>
        <i></i>
</div>

 非常简单我们在来看看css部分：

*{
    padding: 0;
    margin: 0;
}

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

.rocket{
    position: relative;
    animation: shake 0.5s linear infinite;
}

@keyframes shake{
    0%,100%{
        transform: translateY(-2px);
    }
    50%{
        transform: translateY(2px);
    }
}

.rocket::after{
    content: "";
    width: 10px;
    height: 150px;
    background: linear-gradient(rgb(40,158,194),transparent);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -150px;
}

.container>i{
    width: 1px;
    height: 20px;
    position: absolute;
    left: 20px;
    top:0px;
    background-color: #fff;
    animation: line  2s linear infinite;
}
@keyframes line {
    from{
        transform: translateY(0);
    }
    to{
        transform: translateY(85vh);
    }
}

也挺简单的，不过要注意的一点是 

    position: absolute;
    left: 50%;
    transform: translateX(-50%);

可以让一个元素居中

接下来是最重要的js代码：

<script>
        function rand(m,n){
            return Math.ceil(Math.random() * (n-m+1)) + m + 1;
        }
        let num = 40;
        for (let i = 0; i < num; i++) {
            const i = document.createElement("i");
            i.style.height = rand(30,100) + "px";
            i.style.left = rand(1,99) + "vw"
            i.style.animationDuration = rand(5,30)/10 + 's';
            document.querySelector(".container").appendChild(i)
        }
</script>

上面的函数时随即数函数，就是输入两个数，随即生成这两个数之间的数，上面那么多点就是随机生成了高宽，下面的dom就是生成多个i标签的代码，并且同时让动画随即时间

大致就是这样，详细想要了解可以搜原作者的视频，就是火箭特效~~~~~