梦江南 发表于 2024-10-16 08:49

【红衣舞】套用黑黑老师和光同尘代码


<style>
        #tz { margin: 20px auto; width: 600px; height: 700px; border: 1px solid gray; background: url('https://www.yiyuen.com/e/file/view/665407') no-repeat center/cover; box-shadow: 3px 3px 6px gray; border-radius: 8px; z-index: 1; position: relative; }
        #player, #ssvg { position: absolute; }
        #player { width: 150px; height: 150px; left: calc(85% - 100px); top: 15px; cursor: pointer; animation: rot 8s infinite linear var(--state); }
        .down { animation: down var(--dur) var(--delay) linear infinite var(--state), flash 1s var(--delay) infinite alternate linear var(--state); }
        @keyframes down { to { transform: rotate(-10deg) translate(0, 1000px); } }
        @keyframes flash { to { opacity: 0; } }
        @keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="tz">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=31789216" autoplay loop></audio>
        <svg id="ssvg" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
                <symbol id="cc" width="10" height="10" viewBox="0 0 10 10">
                        <circle cx="5" cy="5" r="5"></circlie>
                </symbol>
                <defs>
                        <g><animate attributeName="y" to="400" dur="10s" repeatCount="indefinite"></animate></g>
                </defs>
        </svg>
        <img id="player" alt="" src="https://638183.freep.cn/638183/web/svg/3star_133731353409967500.svg" />
</div>

<script>
mkBalls = (num) => {
        var ww = ssvg.clientWidth,
                str = '',
                colors = ['orange', 'tan', 'yellow', 'gold', 'red', 'plum', 'pink', 'purple'];
        Array(num).fill(0).forEach((a,b) => {
                var x = Math.round(Math.random() * (ww - 20)),
                        size = Math.floor(Math.random() * 6) + 6,
                        fill = colors,
                        dur = Math.floor(10 * Math.random() + 10),
                        delay = -1 * Math.round(Math.random() * 15);
                str += `<use x="${x}" y="-20" width="${size}" height="${size}" fill="${fill}" href="#cc" class="down" style="--dur:${dur}s;--delay:${delay}s"/>`;
        });
        return str;
};

ssvg.innerHTML += mkBalls(50);

mState = () => {
        player.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        ssvg.style.setProperty('--state', aud.paused ? 'paused' : 'running');
};
aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

起个网名好难 发表于 2024-10-16 11:07

https://cccimg.com/view.php/d42eed8c66ea154d17ce2e4f4ca9608c.webp

梦江南 发表于 2024-10-16 15:43

起个网名好难 发表于 2024-10-16 11:07


问好老师，谢谢支持。{:4_204:}

樵歌 发表于 2024-10-16 17:14

天女散花，忘记翩翩起舞！好美！

红影 发表于 2024-10-16 17:36

这美女跳得真好，看得令人陶醉。
欣赏江南美帖{:4_199:}

小辣椒 发表于 2024-10-16 20:56

进来就听到音乐了，美女翩翩起舞，太美了{:4_199:}

梦江南 发表于 2024-10-17 09:33

樵歌 发表于 2024-10-16 17:14
天女散花，忘记翩翩起舞！好美！

问好樵歌老师，谢谢支持！{:4_204:}

梦江南 发表于 2024-10-17 09:34

红影 发表于 2024-10-16 17:36
这美女跳得真好，看得令人陶醉。
欣赏江南美帖

问好影子，谢谢支持鼓励！{:4_204:}

梦江南 发表于 2024-10-17 09:35

小辣椒 发表于 2024-10-16 20:56
进来就听到音乐了，美女翩翩起舞，太美了

问了小辣椒，谢谢支持！{:4_204:}

红影 发表于 2024-10-17 15:42

梦江南 发表于 2024-10-17 09:34
问好影子，谢谢支持鼓励！

特别喜欢看舞蹈，太美了{:4_199:}

樵歌 发表于 2024-10-17 19:24

梦江南 发表于 2024-10-17 09:33
问好樵歌老师，谢谢支持！

谢谢您 带来的好作品！{:4_190:}

游侠 发表于 2024-10-20 07:28

欣赏精彩作品

梦江南 发表于 2024-10-20 09:09

樵歌 发表于 2024-10-17 19:24
谢谢您 带来的好作品！

问好樵歌老师，谢谢支持。早上好！{:4_187:}

梦江南 发表于 2024-10-20 09:10

游侠 发表于 2024-10-20 07:28
欣赏精彩作品

问好老师，谢谢支持，早上好！{:4_187:}
页: [1]
查看完整版本: 【红衣舞】套用黑黑老师和光同尘代码