苍穹

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

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

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

x

本帖最后由马黑黑于 2023-4-14 07:50 编辑

马黑黑 · 发表于 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)