完整目录
1.效果展示2.思路2.0布局2.1让火箭 位于屏幕的中心--flex2.2让火箭 上下不停的移动2.3利用::after 制造 尾部的火焰2.3使用js创建 < i > 并添加随机的大小和位置 颜色2.4使用js创建 < i > 插入 到页面上2.5给 < i > 添加 下落的动画2.6给 < i > 添加 下落的落差 感 3.源码分享html+jscss1.效果展示
2.思路
2.0布局
<body><div class="sence"> //总容器 存放 火箭 以及添加的 <i><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;}
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: 70px;left: calc(50% - 3px);width: 10px;height: 180px;background-image: linear-gradient(red,transparent);//渐变色filter: blur(4px) brightness(50);//阴影}
2.3使用js创建 < i > 并添加随机的大小和位置 颜色
function move(){let sence=document.querySelector(".sence")let count=300let i=0while(i<count){let ico=document.createElement("i")//i的width 高 时间延迟// screenLeftlet X=Math.random()*window.innerWidth-5ico.style.left=X+'px'//widthlet W=Math.random()*3ico.style.width=W+'px'//heightlet H=Math.random()*300+20ico.style.height=H+'px'// screenLeftico.style.top=-H+'px'//动画--产生落差let del=Math.random()*2ico.style.animationDelay=del+'s'//背景色let a=parseInt(Math.random()*255)let b=parseInt(Math.random()*255)let c=parseInt(Math.random()*255)let op=Math.random()*1ico.style.backgroundImage=`linear-gradient(transparent,rgba(${a},${b},${c},${op}))`;ico.style.filter=`brightness(del)`//加入sence.appendChild(ico)i++}}
2.4使用js创建 < i > 插入 到页面上
sence.appendChild(ico)
2.5给 < i > 添加 下落的动画
.sence i{position: absolute;animation: luo 1s linear infinite;}@keyframes luo {0%{transform: translateY(0px);}100%{transform: translateY(100vh);}}
2.6给 < i > 添加 下落的落差 感
let del=Math.random()*2ico.style.animationDelay=del+'s'//让< i ></i> 又不同的开始延迟 形成落差
3.源码分享
html+js
<!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"><title>Document</title><link rel="stylesheet" href="./index.css"></head><body><div class="sence"><div class="scoker"><img src="./3.png" alt=""></div></div><script>function move(){let sence=document.querySelector(".sence")let count=300let i=0while(i<count){let ico=document.createElement("i")//i的width 高 时间延迟// screenLeftlet X=Math.random()*window.innerWidth-5ico.style.left=X+'px'//widthlet W=Math.random()*3ico.style.width=W+'px'//heightlet H=Math.random()*300+20ico.style.height=H+'px'// screenLeftico.style.top=-H+'px'//动画let del=Math.random()*2ico.style.animationDelay=del+'s'//背景色let a=parseInt(Math.random()*255)let b=parseInt(Math.random()*255)let c=parseInt(Math.random()*255)let op=Math.random()*1ico.style.backgroundImage=`linear-gradient(transparent,rgba(${a},${b},${c},${op}))`;ico.style.filter=`brightness(del)`//加入sence.appendChild(ico)i++}}// move()</script></body></html>
css
*{margin: 0;padding: 0;}.sence{position: relative;display: flex;justify-content: center;align-items: center;height: 100vh;background-color: #02060a;overflow: hidden;}.scoker{position: relative;animation: move 0.2s linear infinite;}.scoker::after{content: "";position: absolute;top: 70px;left: calc(50% - 3px);width: 10px;height: 180px;background-image: linear-gradient(red,transparent);filter: blur(4px) brightness(50);}@keyframes move {0%,100%{transform: translateY(0px);}25%{transform: translateY(-5px);}50%{transform: translateY(0px);}75%{transform: translateY(5px);}}.sence i{position: absolute;animation: luo 1s linear infinite;}@keyframes luo {0%{transform: translateY(0px);}100%{transform: translateY(100vh);}}
