论坛 › 动画音画 › 暗夜舞者

马黑黑 发表于 2023-9-5 12:22

暗夜舞者

本帖最后由 马黑黑 于 2023-9-5 12:25 编辑 <br /><br /><style>
#mydiv {
        margin: 0 0 0 calc(50% - 593px);
        display: grid;
        place-items: center;
        width: 1024px;
        height: 640px;
        border: 1px solid gray;
        background: linear-gradient(to right bottom, rgba(100,100,var(--bb),.5) 0, rgba(calc(255 - var(--bb)),0,0,.35) 50%), url('https://638183.freep.cn/638183/t23/webp2/yewu.webp') no-repeat center/cover;
        overflow: hidden;
        position: relative;
        --state: running;
}
yin-fu {
        position: absolute;
        top: 140px;
        font: bold 30px sans-serif;
        opacity: 1;
        animation: fly 10s var(--delay) infinite var(--state);
}
@keyframes fly { to { transform: rotate(var(--deg)) translateY(-400px); opacity: 0; } }
</style>

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

<script>
(function() {

let script = document.createElement('script');
script.charset = 'utf-8';
script.src = 'https://638183.freep.cn/638183/web/api/anklet_lrc.js';
mydiv.appendChild(script);

let num = 0, step = 10;
let degAr = ,
        yinfu = ['\u2669','\u266f','\u266d','\u266c','\u266b','\u266a','\u263d','\u263c','\u00a7','\u266e','\u266f'];
let geci = [,];

let flash = () => {
        num += step;
        if(num > 255 || num < 0) step = -step;
        mydiv.style.setProperty('--bb', num);
};

Array.from({length: 20}).forEach((item,key) => {
        item = document.createElement('yin-fu');
        let idx = Math.floor(Math.random() * yinfu.length);
        item.innerText = yinfu;
        item.style.cssText += `
                color: #${Math.random().toString(16).substr(-6)};
                --deg: ${degAr}deg;/*${60 - Math.random() * 120}deg;*/
                --delay: ${Math.random() * -10}s;
        `;
        mydiv.appendChild(item);
});

setInterval(()=> {
        if(aud.paused) return false;
        flash();
},10);

script.onload = () => {
        HCPlayer({
                papa: '#mydiv',
                lrcAr: geci,
                lrc_css: 'top: 20px;',
                fs_css: 'top: 210px; --bg: transparent;',
                player_css: `
                        top: 100px;
                        border-width: 0;
                        color: #fff;
                        --size: 180px;
                        --bRad: 50%;
                        --track: gray;
                        --prog: orange;
                        --btnBg: linear-gradient(yellow, red);
                `,
                lizi: { color1: '', color2: 'rgba(240,180,55,.75)' },
        });
};

})();
</script>

马黑黑 发表于 2023-9-5 12:24

帖子代码

<style>
#mydiv {
        margin: 0 0 0 calc(50% - 593px);
        display: grid;
        place-items: center;
        width: 1024px;
        height: 640px;
        border: 1px solid gray;
        background: linear-gradient(to right bottom, rgba(100,100,var(--bb),.5) 0, rgba(calc(255 - var(--bb)),0,0,.35) 50%), url('https://638183.freep.cn/638183/t23/webp2/yewu.webp') no-repeat center/cover;
        overflow: hidden;
        position: relative;
        --state: running;
}
yin-fu {
        position: absolute;
        top: 140px;
        font: bold 30px sans-serif;
        opacity: 1;
        animation: fly 10s var(--delay) infinite var(--state);
}
@keyframes fly { to { transform: rotate(var(--deg)) translateY(-400px); opacity: 0; } }
</style>

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

<script>

let script = document.createElement('script');
script.charset = 'utf-8';
script.src = 'https://638183.freep.cn/638183/web/api/anklet_lrc.js';
mydiv.appendChild(script);

let num = 0, step = 10;
let degAr = ,
        yinfu = ['\u2669','\u266f','\u266d','\u266c','\u266b','\u266a','\u263d','\u263c','\u00a7','\u266e','\u266f'];
let geci = [,];

let flash = () => {
        num += step;
        if(num > 255 || num < 0) step = -step;
        mydiv.style.setProperty('--bb', num);
};

Array.from({length: 20}).forEach((item,key) => {
        item = document.createElement('yin-fu');
        let idx = Math.floor(Math.random() * yinfu.length);
        item.innerText = yinfu;
        item.style.cssText += `
                color: #${Math.random().toString(16).substr(-6)};
                --deg: ${degAr}deg;/*${60 - Math.random() * 120}deg;*/
                --delay: ${Math.random() * -10}s;
        `;
        mydiv.appendChild(item);
});

setInterval(()=> {
        if(aud.paused) return false;
        flash();
},10);

script.onload = () => {
        HCPlayer({
                papa: '#mydiv',
                lrcAr: geci,
                lrc_css: 'top: 20px;',
                fs_css: 'top: 210px; --bg: transparent;',
                player_css: `
                        top: 100px;
                        border-width: 0;
                        color: #fff;
                        --size: 180px;
                        --bRad: 50%;
                        --track: gray;
                        --prog: orange;
                        --btnBg: linear-gradient(yellow, red);
                `,
                lizi: { color1: '', color2: 'rgba(240,180,55,.75)' },
        });
};

</script>

小辣椒 发表于 2023-9-5 12:34

可以回帖了？

小辣椒 发表于 2023-9-5 12:35

变色背景加彩色小圆频谱，这个效果绝对可以直接套用玩{:4_178:}

小辣椒 发表于 2023-9-5 12:36

谢谢黑黑的精彩源码分享，今天上来及时的{:4_170:}

马黑黑 发表于 2023-9-5 12:40

小辣椒 发表于 2023-9-5 12:34
可以回帖了？

都可以都可以

马黑黑 发表于 2023-9-5 12:40

小辣椒 发表于 2023-9-5 12:36
谢谢黑黑的精彩源码分享，今天上来及时的

刚做好

马黑黑 发表于 2023-9-5 12:42

小辣椒 发表于 2023-9-5 12:34
可以回帖了？

忘了说明这个：

yinfu = ['\u2669','\u266f','\u266d','\u266c','\u266b','\u266a','\u263d','\u263c','\u00a7','\u266e','\u266f'];

上面这句，只有本论坛这么使用转换过的字符，在其他 UTF-8 编码的页面，请使用实体字符替代 \uxxxx

马黑黑 发表于 2023-9-5 12:43

小辣椒 发表于 2023-9-5 12:35
变色背景加彩色小圆频谱，这个效果绝对可以直接套用玩

{:4_181:}

山人 发表于 2023-9-5 12:52

JS代码头尾加：

(function() {

//JS代码

})();

梦油 发表于 2023-9-5 14:38

五彩斑斓的灯光变幻令人感到欢快。

红影 发表于 2023-9-5 15:03

这些飘飞的字符真美，画面也很动感。欣赏黑黑好帖{:4_199:}

马黑黑 发表于 2023-9-5 17:48

红影 发表于 2023-9-5 15:03
这些飘飞的字符真美，画面也很动感。欣赏黑黑好帖

感谢支持

醉美水芙蓉 发表于 2023-9-5 18:37

马黑黑 发表于 2023-9-5 20:43

醉美水芙蓉 发表于 2023-9-5 18:37
欣赏老师漂亮特效！

{:4_190:}

风中飞尘 发表于 2023-9-5 21:27

这个小圆点可以改成线条的样式么

红影 发表于 2023-9-5 21:58

马黑黑 发表于 2023-9-5 17:48
感谢支持

这个音乐跟脚链的动感结合得特别好{:4_187:}

千羽 发表于 2023-9-5 22:12

好漂亮的播放器，变色的画面配上音乐很有看点，黑黑老师是最强大脑{:4_187:}

马黑黑 发表于 2023-9-5 22:55

千羽 发表于 2023-9-5 22:12
好漂亮的播放器，变色的画面配上音乐很有看点，黑黑老师是最强大脑

{:4_203:}

马黑黑 发表于 2023-9-5 22:56

红影 发表于 2023-9-5 21:58
这个音乐跟脚链的动感结合得特别好

还可以

查看完整版本: 暗夜舞者