CSS+HTML流星雨

马黑黑 · 发表于 2023-4-16 21:44

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

马黑黑 · 发表于 2023-4-16 21:44

代码

<style>
#papa {
margin: 20px auto;
width: 740px;
height: 640px;
background: #000;
overflow: hidden;
position: relative;
}
#wrap {
position: absolute;
width: 100%;
height: 50%;
transform: rotate(45deg);
}
.line {
--du: 10s; --delay: 0s;
position: absolute;
width: 1px;
height: 100px;
top: -200px;
opacity: .9;
background: linear-gradient(to top, snow, transparent);
animation: flow var(--du) var(--delay) infinite linear;
}
@keyframes flow { to { top: 100%; opacity: 0; } }
</style>
<div id="papa">
<div id="wrap"></div>
</div>
<script>
let total = 40, ww = wrap.offsetWidth;
Array.from({length:total}).forEach((item,key) => {
let sp = document.createElement('span');
sp.className = 'line';
sp.style.cssText += `
--delay: ${Math.random() * 4 - 4}s;
--du: ${Math.random() * 8 + 4}s;
left: ${Math.random() * ww}px;
height: ${Math.random() * 50 + 50}px;
`;
wrap.appendChild(sp);
});
</script>

复制代码

马黑黑 · 发表于 2023-4-16 21:52

主体结构：父元素 + 子元素

其中，模拟流星雨的线条（span 标签）加载到子元素内，这些线条执行关键帧动画。子元素旋转 45 度。

线条模拟方法：一像素宽、100像素以内高度，线性渐变背景，参与渐变颜色雪白色+透明色，线条主体透明度 0.9，关键帧动画逐渐变化到0.1。总体上有拖尾效果，虽然不太逼真。

关键帧动画：每条线周期时长不一样，延时也不一样，所以运动过程中有错落感。