论坛 › 欢乐水吧 › 星星背后

马黑黑 发表于 2023-4-10 08:07

星星背后

本帖最后由 马黑黑 于 2023-4-10 08:11 编辑 <br /><br /><style>
#papa {margin: -80px 0 0 calc(50% - 593px);width: 1024px;height: 640px;background: url('https://638183.freep.cn/638183/t23/webp1/xxbh.webp') center/cover no-repeat;position: relative;}
#papa::before, #papa::after {position: absolute;content: url('https://638183.freep.cn/638183/t22/gif/0b01.gif');mix-blend-mode: screen;}
#papa::after { left: 180px; }
#wrap {position: absolute;left: 240px;top: 20px;width: 200px;height: 200px;display: grid;place-items: center;cursor: pointer;opacity: .95;z-index: 10;animation: hue 10s infinite alternate var(--state);}
#wrap > span {position: absolute;width: 0;height: 0;border-radius: 50%;border: 8px dotted hsla(60,50%,50%,.65);transform: rotate(var(--deg));animation: rot var(--time) infinite linear var(--state);}
@keyframes rot {from { transform: rotate(var(--deg)); }to { transform: rotate(calc(var(--deg) + 360deg)); }}
@keyframes hue {to { filter: hue-rotate(360deg); }}
</style>

<div id="papa">
        <div id="wrap" title="播放/暂停"><span></span></div>
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=33510629" loop="loop" autoplay="autoplay"></audio>
</div>

<script>
Array.from({length:10}).forEach((item,key) => {
        let sp = document.createElement('span');
        sp.style.cssText += `
                --deg: ${Math.random()*(key+10)}deg;
                --time: ${Math.random()*10+10}s;
                width: ${key*18}px;
                height: ${key*18}px;
                border-color: #${Math.random().toString(16).substr(-6)};
                border-width: ${2*key}px;
        `;
        wrap.appendChild(sp);
});
let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
wrap.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

马黑黑 发表于 2023-4-10 08:13

本帖最后由 马黑黑 于 2023-4-10 12:41 编辑

另外两种样式：


① 星星的背后 (freeee.ml)

② 星星背后 (52qingyin.cn)

马黑黑 发表于 2023-4-10 08:14

代码
<style>
#papa {
        margin: 30px auto;
        width: 1024px;
        height: 640px;
        background: url('https://638183.freep.cn/638183/t23/webp1/xxbh.webp') center/cover no-repeat;
        position: relative;
}
#papa::before, #papa::after {
        position: absolute;
        content: url('https://638183.freep.cn/638183/t22/gif/0b01.gif');
        mix-blend-mode: screen;
}
#papa::after { left: 180px; }
#wrap {
        position: absolute;
        left: 240px;
        top: 20px;
        width: 200px;
        height: 200px;
        display: grid;
        place-items: center;
        cursor: pointer;
        z-index: 10;
        animation: hue 10s infinite alternate var(--state);
}
#wrap > span {
        position: absolute;
        width: 0;
        height: 0;
        border-radius: 50%;
        border: 8px dotted hsla(60,50%,50%,.65);
        transform: rotate(var(--deg));
        animation: rot var(--time) infinite linear var(--state);
}
@keyframes rot {
        from { transform: rotate(var(--deg)); }
        to { transform: rotate(calc(var(--deg) + 360deg)); }
}
@keyframes hue {
        to { filter: hue-rotate(360deg); }
}
</style>

<div id="papa">
        <div id="wrap" title="播放/暂停"><span></span></div>
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=33510629" loop="loop" autoplay="autoplay"></audio>
</div>

<script>
Array.from({length:10}).forEach((item,key) => {
        let sp = document.createElement('span');
        sp.style.cssText += `
                --deg: ${Math.random()*(key+10)}deg;
                --time: ${Math.random()*10+10}s;
                width: ${key*18}px;
                height: ${key*18}px;
                border-color: #${Math.random().toString(16).substr(-6)};
                border-width: ${2*key}px;
        `;
        wrap.appendChild(sp);
});
let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
wrap.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

庶民 发表于 2023-4-10 11:52

这个有生活的气息，点赞。

马黑黑 发表于 2023-4-10 12:42

庶民 发表于 2023-4-10 11:52
这个有生活的气息，点赞。

感谢支持

樵歌 发表于 2023-4-10 12:46

友情提醒@小辣椒 @红影@雨中悄然 等小盆友们快来做作业了{:4_334:}

马黑黑 发表于 2023-4-10 12:59

樵歌 发表于 2023-4-10 12:46
友情提醒@小辣椒 @红影@雨中悄然 等小盆友们快来做作业了

助教辛苦啦{:4_170:}

红影 发表于 2023-4-10 18:48

马黑黑 发表于 2023-4-10 08:13
另外两种样式：




比较下来，还是这个最好看{:4_187:}

红影 发表于 2023-4-10 18:57

是border-width: ${2*key}px;让那些点点逐渐变大的吧？

红影 发表于 2023-4-10 18:57

樵歌 发表于 2023-4-10 12:46
友情提醒@小辣椒 @红影@雨中悄然 等小盆友们快来做作业了

收到，还没想好做什么呢{:4_173:}

红影 发表于 2023-4-10 19:00

这个变色圆盘貌似在深色背景上更漂亮{:4_199:}

马黑黑 发表于 2023-4-10 19:33

红影 发表于 2023-4-10 19:00
这个变色圆盘貌似在深色背景上更漂亮

我个人觉得放在悄然网站的更好看。合适你去看看。

马黑黑 发表于 2023-4-10 19:34

红影 发表于 2023-4-10 18:48
比较下来，还是这个最好看

啊？

雨中悄然 发表于 2023-4-10 20:34

马黑黑 发表于 2023-4-10 08:13
另外两种样式：




目前有三种样式了{:4_170:}我去瞧瞧代码

马黑黑 发表于 2023-4-10 21:27

雨中悄然 发表于 2023-4-10 20:34
目前有三种样式了我去瞧瞧代码

Emeditor有代码（文档）比较功能

大猫咪 发表于 2023-4-10 21:46

音美图靓   星星背后真黑黑{:5_117:}

马黑黑 发表于 2023-4-10 21:48

大猫咪 发表于 2023-4-10 21:46
音美图靓   星星背后真黑黑

{:4_181:}

雨中悄然 发表于 2023-4-10 21:55

马黑黑 发表于 2023-4-10 21:27
Emeditor有代码（文档）比较功能

{:4_173:}找到了跟了一个简单的，有空看看

马黑黑 发表于 2023-4-10 21:57

雨中悄然 发表于 2023-4-10 21:55
找到了跟了一个简单的，有空看看

欧

红影 发表于 2023-4-10 22:14

马黑黑 发表于 2023-4-10 19:33
我个人觉得放在悄然网站的更好看。合适你去看看。

去看了啊，这个更有景深感。

查看完整版本: 星星背后