html+css+js炫酷特效+加速粒子效果

完整目录

    • 1.效果展示
    • 2.思路
      • 2.0布局
      • 2.1让火箭 位于屏幕的中心--flex
      • 2.2让火箭 上下不停的移动
      • 2.3利用::after 制造 尾部的火焰
      • 2.3使用js创建 < i > 并添加随机的大小和位置 颜色
      • 2.4使用js创建 < i > 插入 到页面上
      • 2.5给 < i > 添加 下落的动画
      • 2.6给 < i > 添加 下落的落差 感
    • 3.源码分享
      • html+js
      • css

1.效果展示

html+css+js炫酷特效+加速粒子效果_第1张图片
html+css+js炫酷特效+加速粒子效果_第2张图片

2.思路

2.0布局

<body>
    <div class="sence">  //总容器 存放 火箭 以及添加的 

        <div class="scoker"> //居中的火箭  会有个after的尾火焰
            <img src="./3.png" alt="">
        </div>

    </div>
</body>

2.1让火箭 位于屏幕的中心–flex

*{
   
    margin: 0;
    padding: 0;
}
.sence{
   
//和屏幕一样大小  火箭居中
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #02060a;
    overflow: hidden;
}

html+css+js炫酷特效+加速粒子效果_第3张图片

2.2让火箭 上下不停的移动

.scoker{
   
    position: relative; //让火焰 after的定位相对于他  父相子绝
    animation: move 0.2s linear infinite;//上下移动
}
@keyframes move {
   
    0%,100%{
   
        transform: translateY(0px);
    }
    25%{
   
        transform: translateY(-5px);
    }
    50%{
   
        transform: translateY(0px);
    }
    75%{
   
        transform: translateY(5px);
    }
}

2.3利用::after 制造 尾部的火焰

.scoker::after{
   
    content: "";
    position: absolute;
    top: 

你可能感兴趣的:(javaScript特效,javascript,css,html)