论坛 › 马黑黑教程专版 › CSS+HTML流星雨

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

CSS+HTML流星雨

<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: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。总体上有拖尾效果，虽然不太逼真。

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

红影 发表于 2023-4-16 22:05

“线性渐变背景，参与渐变颜色雪白色+透明色”，再加上透明度变化，真的有流星划过的感觉呢{:4_199:}

红影 发表于 2023-4-16 22:06

这么多流星，赶紧许愿啊{:4_173:}

红影 发表于 2023-4-16 22:09

不光是CSS+HTML，也有JS的功劳啊{:4_173:}

马黑黑 发表于 2023-4-16 22:32

红影 发表于 2023-4-16 22:05
“线性渐变背景，参与渐变颜色雪白色+透明色”，再加上透明度变化，真的有流星划过的感觉呢

有点像，没有画布做的那么逼真

马黑黑 发表于 2023-4-16 22:33

红影 发表于 2023-4-16 22:09
不光是CSS+HTML，也有JS的功劳啊

没有JS也行，但要一个一个地写 span 样式。

所以现在出现很多的 CSS in JS 的组件，css-doodle 就是其中一个。

马黑黑 发表于 2023-4-16 22:34

红影 发表于 2023-4-16 22:06
这么多流星，赶紧许愿啊

{:4_195:}

红影 发表于 2023-4-16 23:23

马黑黑 发表于 2023-4-16 22:32
有点像，没有画布做的那么逼真

已经很像了{:4_187:}

红影 发表于 2023-4-16 23:24

马黑黑 发表于 2023-4-16 22:33
没有JS也行，但要一个一个地写 span 样式。

所以现在出现很多的 CSS in JS 的组件，css-doodle 就是其 ...

哦哦，就是封装起来使用吧。

红影 发表于 2023-4-16 23:24

马黑黑 发表于 2023-4-16 22:34


这是喊谁呢{:4_173:}

樵歌 发表于 2023-4-17 08:02

俺明着许愿：神仙诸佛菩萨上帝听好了，借俺阳寿两万年！不得有误{:4_170:}

马黑黑 发表于 2023-4-17 09:04

樵歌 发表于 2023-4-17 08:02
俺明着许愿：神仙诸佛菩萨上帝听好了，借俺阳寿两万年！不得有误

准了

马黑黑 发表于 2023-4-17 09:05

红影 发表于 2023-4-16 23:24
这是喊谁呢

许愿啊

马黑黑 发表于 2023-4-17 09:05

红影 发表于 2023-4-16 23:24
哦哦，就是封装起来使用吧。

用的时候省事

马黑黑 发表于 2023-4-17 09:06

红影 发表于 2023-4-16 23:23
已经很像了

勉勉强强，还可以的吧

非常开心 发表于 2023-4-17 09:17

谢谢老师分享优秀资源，辛苦了！

马黑黑 发表于 2023-4-17 09:20

非常开心 发表于 2023-4-17 09:17
谢谢老师分享优秀资源，辛苦了！

上午好

红影 发表于 2023-4-17 10:27

马黑黑 发表于 2023-4-17 09:05
许愿啊

对，可以把这个帖子当做许愿帖，每个人来这里许下自己的愿望{:4_173:}

查看完整版本: CSS+HTML流星雨