论坛 › 动画音画 › 苍穹

马黑黑 发表于 2023-4-14 07:46

苍穹

本帖最后由 马黑黑 于 2023-4-14 07:50 编辑 <br /><br /><style>
#mydiv {margin: -80px 0 0 calc(50% - 593px);width: 1024px;height: 640px;background: #000 url('https://638183.freep.cn/638183/t23/1/rr.jpg') center/cover no-repeat;overflow: hidden;cursor: pointer;position: relative;--state: paused;}
.dot {position: absolute;left: 50%;bottom: -10px;width: 4px;height: 4px;border-radius: 50%;background: snow;}
@keyframes ani { to { transform: rotate(var(--deg)) translateY(-640px); }}
</style>

<div id="mydiv"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1346093344" loop="loop" autoplay="autoplay"></audio>

<script>
(function() {
        Array.from({length: 400}).forEach( (item,key) => {let sp = document.createElement('span');let ww = Math.random() * 5 + 2;sp.className = 'dot';sp.style.cssText += ` --deg: ${-50 + Math.random() * 100}deg; width: ${ww}px; height: ${ww}px; background: #${Math.random().toString(16).substr(-6)}; animation: ani 10s ${Math.random() * key - 4}s infinite alternate var(--state);`;mydiv.appendChild(sp);});
        let mState = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        aud.addEventListener('play', mState, false);
        aud.addEventListener('pause', mState, false);
        mydiv.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>

马黑黑 发表于 2023-4-14 07:51

帖子源码
<style>
#mydiv {
        margin: 20px auto;
        width: 1024px;
        height: 640px;
        background: #000 url('https://638183.freep.cn/638183/t23/1/rr.jpg') center/cover no-repeat;
        overflow: hidden;
        cursor: pointer;
        position: relative;
        --state: paused;
}
.dot {
        position: absolute;
        left: 50%;
        bottom: -10px;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: snow;
}
@keyframes ani { to { transform: rotate(var(--deg)) translateY(-640px); }}
</style>

<div id="mydiv"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1346093344" loop="loop" autoplay="autoplay"></audio>

<script>
Array.from({length: 400}).forEach( (item,key) => {
        let sp = document.createElement('span');
        let ww = Math.random() * 5 + 2;
        sp.className = 'dot';
        sp.style.cssText += `
                --deg: ${-50 + Math.random() * 100}deg;
                width: ${ww}px;
                height: ${ww}px;
                background: #${Math.random().toString(16).substr(-6)};
                animation: ani 10s ${Math.random() * key - 4}s infinite alternate var(--state);
        `;
        mydiv.appendChild(sp);
});
let mState = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
mydiv.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

马黑黑 发表于 2023-4-14 07:52

本帖最后由 马黑黑 于 2023-4-14 12:43 编辑

本帖用于 css-doodle 加餐教程比较之用
在discuz论坛发帖，默认不会支持第三方JS，因此，css-doodle 特效无法在本坛中使用。我发的这个帖子，是原生 CSS+HTML+JS 实现的粒子效果。而 css-doodle 的一个加餐教程，将展示类似本帖的效果，故先把本帖发布出来。

用 css-doodle 做成的另外两个样式：① 苍穹 (freeee.ml)② 苍穹（css-doodle版本2） (52qingyin.cn)

明月 发表于 2023-4-14 08:29

{:4_178:}{:4_178:}{:4_178:}

亦是金 发表于 2023-4-14 08:41

新播放器好看！{:4_178:}

梦油 发表于 2023-4-14 09:44

群星闪烁的夜空太美了。

马黑黑 发表于 2023-4-14 12:00

梦油 发表于 2023-4-14 09:44
群星闪烁的夜空太美了。

感谢支持

马黑黑 发表于 2023-4-14 12:01

亦是金 发表于 2023-4-14 08:41
新播放器好看！

感谢支持

马黑黑 发表于 2023-4-14 12:01

明月 发表于 2023-4-14 08:29


中午好

顾-念 发表于 2023-4-14 13:56

厉害了，点赞！

梦油 发表于 2023-4-14 14:50

马黑黑 发表于 2023-4-14 12:00
感谢支持

你对俺的支持更多。

红影 发表于 2023-4-14 15:51

这些粒子构成了喷泉一样的效果，真美{:4_431:}

红影 发表于 2023-4-14 15:55

马黑黑 发表于 2023-4-14 07:52
本帖用于 css-doodle 加餐教程比较之用
在discuz论坛发帖，默认不会支持第三方JS，因此，css-doodle 特效 ...

两个效果都去看了，一个的伞形更短一些，一个给粒子们弄了个巢，都很漂亮{:4_173:}

红影 发表于 2023-4-14 16:08

let ww = Math.random() * 5 + 2;感觉这个宽度值很小啊，咋能散开来时那么大呢？是粒子间的随机宽高么？然后随正负50度发散开来？
看到了再你自己那里用的是css-doodle{:4_173:}

马黑黑 发表于 2023-4-14 18:13

红影 发表于 2023-4-14 16:08
let ww = Math.random() * 5 + 2;感觉这个宽度值很小啊，咋能散开来时那么大呢？是粒子间的随机宽高么？然 ...

ww 变量是粒子个体的尺寸，不是粒子的活动范围。

粒子能散开，与 transform: rotate() translateY() 有关，以前介绍过的。

马黑黑 发表于 2023-4-14 18:13

顾-念 发表于 2023-4-14 13:56
厉害了，点赞！

晚上好

马黑黑 发表于 2023-4-14 18:14

红影 发表于 2023-4-14 15:55
两个效果都去看了，一个的伞形更短一些，一个给粒子们弄了个巢，都很漂亮

{:4_170:}

马黑黑 发表于 2023-4-14 18:14

红影 发表于 2023-4-14 15:51
这些粒子构成了喷泉一样的效果，真美

还不差吧

马黑黑 发表于 2023-4-14 18:14

梦油 发表于 2023-4-14 14:50
你对俺的支持更多。

彼此彼此

梦油 发表于 2023-4-14 18:16

马黑黑 发表于 2023-4-14 18:14
彼此彼此

谢啦！{:4_190:}

查看完整版本: 苍穹