论坛 › 欢乐水吧 › 蓝

马黑黑 发表于 2023-3-31 19:33

蓝

<style>
#papa { margin: 0 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: lightblue url('https://638183.freep.cn/638183/t23/webp/lan.webp') center/cover no-repeat; box-shadow: 3px 3px 20px #000; position: relative; z-index: 1; }
.donut { --delay: 0s; --tt: 8s; position: absolute; width: 30px; height: 40px; border-radius: 50%; border: 40px solid tan; border-width: 20px 30px 30px 20px; box-shadow: 0 0 12px #000 inset; opacity: .72; cursor: pointer; animation: rot var(--tt) var(--delay) infinite alternate linear var(--state); }
@keyframes rot { to { transform:scale(1.5) rotate(2turn); } }
</style>

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

<script>
(function() {
        let spans = [];
        (function() {Array.from({length: 6}).forEach((item,key) => {let sp = document.createElement('span'), xx = Math.random()*30 + 30;sp.className = 'donut';sp.style.cssText += `left: ${Math.random()*(papa.offsetWidth-180) + 30}px;top: ${Math.random()*(papa.offsetHeight-180) + 30}px;border-color: #${Math.random().toString(16).substr(-6)} #${Math.random().toString(16).substr(-6)} #${Math.random().toString(16).substr(-6)} #${Math.random().toString(16).substr(-6)};width: ${xx}px;height: ${xx}px;--delay: ${Math.random()*key*.2}s;--tt: ${Math.random()*key +6}s;`;papa.appendChild(sp);spans.push(sp);});})();
        let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        spans.forEach((item) => item.onclick = () => aud.paused ? aud.play() : aud.pause());
        aud.addEventListener('play', mState, false);
        aud.addEventListener('pause', mState, false);
})();
</script>

马黑黑 发表于 2023-3-31 19:37

源码
<style>
#papa {
        margin: auto;
        width: 1024px;
        height: 640px;
        background: lightblue url('https://638183.freep.cn/638183/t23/webp/lan.webp') center/cover no-repeat;
        box-shadow: 3px 3px 20px #000;
        position: relative;
        z-index: 1;
}
.donut {
        --delay: 0s; --tt: 8s;
        position: absolute;
        width: 30px;
        height: 40px;
        border-radius: 50%;
        border: 40px solid tan;
        border-width: 20px 30px 30px 20px;
        box-shadow: 0 0 12px #000 inset;
        opacity: .72;
        cursor: pointer;
        animation: rot var(--tt) var(--delay) infinite alternate linear var(--state);
}
@keyframes rot { to { transform:scale(1.5) rotate(2turn); } }
</style>

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

<script>
let spans = [];
(function() {
        Array.from({length: 6}).forEach((item,key) => {
                let sp = document.createElement('span'), xx = Math.random()*30 + 30;
                sp.className = 'donut';
                sp.style.cssText += `
                        left: ${Math.random()*(papa.offsetWidth-180) + 30}px;
                        top: ${Math.random()*(papa.offsetHeight-180) + 30}px;
                        border-color: #${Math.random().toString(16).substr(-6)} #${Math.random().toString(16).substr(-6)} #${Math.random().toString(16).substr(-6)} #${Math.random().toString(16).substr(-6)};
                        width: ${xx}px;
                        height: ${xx}px;
                        --delay: ${Math.random()*key*.2}s;
                        --tt: ${Math.random()*key +6}s;
                `;
                papa.appendChild(sp);
                spans.push(sp);
        });
})();

let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');

spans.forEach((item) => item.onclick = () => aud.paused ? aud.play() : aud.pause());

aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);

</script>

冬天的雨 发表于 2023-3-31 20:18

连环扣{:4_199:}

冬天的雨 发表于 2023-3-31 20:19

连环扣就是播放器{:4_199:}

马黑黑 发表于 2023-3-31 20:49

冬天的雨 发表于 2023-3-31 20:18
连环扣

位置随机，它们可能是部分重合的，也可能是完全分开的

马黑黑 发表于 2023-3-31 20:49

冬天的雨 发表于 2023-3-31 20:19
连环扣就是播放器

酷酷的扣子{:5_106:}

樵歌 发表于 2023-3-31 21:09

这个有意思，那环圆得不能再圆，可乍一看却是扁的{:4_189:}

马黑黑 发表于 2023-3-31 21:12

樵歌 发表于 2023-3-31 21:09
这个有意思，那环圆得不能再圆，可乍一看却是扁的

有点圆不是很圆

小辣椒 发表于 2023-3-31 21:35

黑黑这个圆的小圈还会变换位置？

小辣椒 发表于 2023-3-31 21:36

有点像左三圈右三圈{:4_170:}

小辣椒 发表于 2023-3-31 21:37

刷新几次位置都不一样，是随机的吧

马黑黑 发表于 2023-3-31 21:51

小辣椒 发表于 2023-3-31 21:37
刷新几次位置都不一样，是随机的吧

是的，位置随机

马黑黑 发表于 2023-3-31 21:52

小辣椒 发表于 2023-3-31 21:35
黑黑这个圆的小圈还会变换位置？

对，每次打开位置都不一样

马黑黑 发表于 2023-3-31 21:52

小辣椒 发表于 2023-3-31 21:36
有点像左三圈右三圈

还有啥啥扭扭？

小辣椒 发表于 2023-3-31 22:44

马黑黑 发表于 2023-3-31 21:52
还有啥啥扭扭？

看见了，你现在是娱乐性强起来了

小辣椒 发表于 2023-3-31 22:44

马黑黑 发表于 2023-3-31 21:52
对，每次打开位置都不一样

看了几遍了，效果不错的

小辣椒 发表于 2023-3-31 22:45

马黑黑 发表于 2023-3-31 21:51
是的，位置随机

看看都好玩，坐下来一会儿就很迟了，瞎忙什么都不知道

马黑黑 发表于 2023-3-31 22:47

小辣椒 发表于 2023-3-31 22:45
看看都好玩，坐下来一会儿就很迟了，瞎忙什么都不知道

还手忙脚乱的是吧

马黑黑 发表于 2023-3-31 22:48

小辣椒 发表于 2023-3-31 22:44
看了几遍了，效果不错的

这事新做的光盘，只要边框设置为一样大小。光盘的代码少也容易懂：

http://mahei.freeee.ml/art/show.php?st=1&sd=1&art=mahei_1680015084

马黑黑 发表于 2023-3-31 22:49

小辣椒 发表于 2023-3-31 22:44
看见了，你现在是娱乐性强起来了

{:5_106:}

查看完整版本: 蓝