论坛 › 音乐沙龙 › 梦里水乡

岩新新 发表于 2023-6-29 09:12

梦里水乡

本帖最后由 岩新新 于 2023-6-29 12:10 编辑 <br /><br /><div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_1918533">
<style>
#mydiv {
        margin: 0 0 0 calc(50% - 593px);
        width: 1024px;
        height: 620px;
        border: 12px solid tan;
        background: url('https://i.mp3.wf/view.php/ecda93eeb4adf31832f19bc55de3110f.gif'),
                url('https://638183.freep.cn/638183/rb2.jpg') no-repeat center/cover,
                url('https://i.mp3.wf/view.php/33ee434f3c310c7f456fc8a71626f02e.gif') no-repeat 100px 150px;
        background-blend-mode: screen,screen;
        box-shadow: 0 0 8px #000;
        position: relative;
        --state: paused;
}
.circle {
        width: 100px;
        height: 100px;
        top: 0;left: 0;
        border-radius: 50%;
        border: 6px solid tan;
        border-color: red tan pink purple;
        box-sizing: border-box;
        background: url('https://i.mp3.wf/view.php/7b823b7bfd6eaa089477281dd0b32ebf.jpg') no-repeat center/cover;
        display: block;
        position: absolute;
        offset-path: path('M30 300 Q512 -200, 994 300');
        cursor: pointer;
        opacity: .65;
        animation: rot 6s var(--delay) infinite linear var(--state);
}
@keyframes rot { to { transform: rotate(360deg); } }
</style>

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

<script>
(function() {
        let spans = [];
        let setRgb = () => {
                let ar = [];
                for(i = 0; i < 3; i ++) {
                        ar.push(Math.floor(Math.random() * 256));
                }
                return ar.join(',');
        };
        let mkEles = (papa,n) => {
                Array.from({length: n}).forEach( (item,key) => {
                        item = document.createElement('span');
                        item.className = 'circle';
                        item.style.cssText += `
                                border-color: rgb(${setRgb()}) rgb(${setRgb()}) rgb(${setRgb()}) rgb(${setRgb()});
                                offset-distance: ${100 / n * (key + .5)}%;
                                --delay: ${Math.random() * -6}s;
                        `;
                        spans.push(item);
                        papa.appendChild(item);
                });
        };
        mkEles(mydiv,8);
        let mState = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        aud.addEventListener('play', mState, false);
        aud.addEventListener('pause', mState, false);
        spans.forEach((item) => item.onclick = () => aud.paused ? aud.play() : aud.pause());
})();
</script></td></tr></table>

红影 发表于 2023-6-29 11:06

新新这么快就做出来了，厉害{:4_187:}

岩新新 发表于 2023-6-29 12:18

红影 发表于 2023-6-29 11:06
新新这么快就做出来了，厉害

https://www.huachaowang.com/static/image/smiley/hcbiaoqing2/106.gif

梦缘 发表于 2023-6-29 16:55

欣赏精彩佳作，谢谢分享，点赞！{:4_187:}

岩新新 发表于 2023-6-29 17:02

梦缘 发表于 2023-6-29 16:55
欣赏精彩佳作，谢谢分享，点赞！

谢谢欣赏！

醉美水芙蓉 发表于 2023-6-29 18:31

红影 发表于 2023-6-29 19:27

岩新新 发表于 2023-6-29 12:18


问好新新，晚上好{:4_187:}

岩新新 发表于 2023-6-29 20:55

醉美水芙蓉 发表于 2023-6-29 18:31
老师做得漂亮！

谢谢欣赏！

小辣椒 发表于 2023-6-29 22:14

欣赏岩新新精彩制作{:4_187:}

查看完整版本: 梦里水乡