论坛 › 欢乐水吧 › 等你归来（学习黑黑酹江月频谱欣赏）TO：亦是金

小辣椒 发表于 2023-9-3 20:34

等你归来（学习黑黑酹江月频谱欣赏）TO：亦是金

<style>
        #papa { margin: 120px 0 0 calc(50% - 593px); width: 1024px; height: 688px; background: url('https://pic.imgdb.cn/item/64f438fd661c6c8e540801ea.jpg') no-repeat center/cover; box-shadow: 4px 4px 8px black; overflow: hidden; display: grid; place-items: center; z-index: 1; position: relative; --state: running; }
        .meteor { position: absolute; width: 2px; height: 2px; background: linear-gradient(to right, transparent, lightblue); transform: rotate(30deg); animation: fall var(--du) var(--delay) infinite linear; }
        @keyframes fall { to { transform: translate(100px,100px) rotate(40deg); width: var(--ww); opacity: 0; } }
#dt1{ position: absolute; width: 120px; height: 80px; bottom: 1%; left: 580px; }


</style>

<div id="papa">

<img id="dt1" src="https://pic.imgdb.cn/item/64f43918661c6c8e5408099e.gif" alt="" />

<span class="meteor"></span></div>
<audio id="aud" src="https://wx.ttt.dj/data/nfs//mp3/dngl.mp3" autoplay loop></audio>


<script>
       
(function() {
        let script = document.createElement('script');
        script.src = 'https://638183.freep.cn/638183/web/api/anklet_lrc.js';
        script.charset = 'utf-8';
        document.head.appendChild(script);
        let geci = [ ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
        script.onload = () => {
                HCPlayer({
                        papa: '#papa',
                        lrcAr: geci,
                        lrc_css: 'top: 10%; color: Green; --bg: linear-gradient(rgba(255,165,0,.5),rgba(255,165,0,.25));',
                        fs_css: 'top: 18%; color: #ddd; background: #0e146c;',
                        player_css: `
                                bottom: 180px;
                                border-width: 0;
                                color: Snow;
                                --size: 300px;
                                --bRad: 50%;
                                --track: DarkGray;
                                --prog: GreenYellow;
                                --btnBg: linear-gradient(Green, Yellow);
                        `,
                        lizi: { color1: 'Green', color2: 'Yellow' },
                });
        };
        [...new Array(40).keys()].forEach((e,k) => {
                e = document.createElement('span');
                e.className = 'meteor';
                e.style.cssText += `
                        left: ${100 * Math.random()}%;
                        top: ${20 * Math.random()}%;
                        --du: ${6 + Math.random() * 4}s;
                        --delay: -${Math.random() * 6}s;
                        --ww: ${50 + Math.random() * 50}px;
                `;
                papa.appendChild(e);
        });
})();

</script>

小辣椒 发表于 2023-9-3 20:36

@亦是金

感谢前辈的支持，高产的每个个精彩的分享，现在都是专辑了{:4_199:}

小辣椒 发表于 2023-9-3 20:38

@马黑黑

黑黑上来看看今天没有新的分享，这个是昨天的作业，小辣椒得悠着玩了，慢慢来了，看见这么多的回帖都没有回的。。。。。

小辣椒 发表于 2023-9-3 20:39

谢谢黑黑教程分享，这个比较简单一点就直接找了个图加了个效果

小辣椒 发表于 2023-9-3 20:40

这个不用跨越的音乐，也是可以随便找音乐了

红影 发表于 2023-9-3 21:07

这条小鱼很活泼，很有趣。亲爱的制作颜色搭配真好，这首歌也很喜欢呢。亦是金老师收礼开心{:4_187:}

小辣椒 发表于 2023-9-3 21:14

红影 发表于 2023-9-3 21:07
这条小鱼很活泼，很有趣。亲爱的制作颜色搭配真好，这首歌也很喜欢呢。亦是金老师收礼开心
亲爱的，这个脚链的颜色感觉也是自己喜欢的，和歌词同步相辅相成的，同色呈现做不到绝对感觉差不多就这样了

红影 发表于 2023-9-3 21:30

小辣椒 发表于 2023-9-3 21:14
亲爱的，这个脚链的颜色感觉也是自己喜欢的，和歌词同步相辅相成的，同色呈现做不到绝对感觉差不多就这样 ...

是的，这里的颜色呼应特别好呢{:4_199:}

亦是金 发表于 2023-9-3 21:43

小辣椒 发表于 2023-9-3 20:36
@亦是金

感谢前辈的支持，高产的每个个精彩的分享，现在都是专辑了

问好小辣椒！收到你的礼物很是开心！感谢你的一路关照,致谢！{:4_187:}

亦是金 发表于 2023-9-3 21:45

帖子制作精美，欣赏学习了！{:4_187:}

马黑黑 发表于 2023-9-3 23:08

小辣椒 发表于 2023-9-3 20:38
@马黑黑

黑黑上来看看今天没有新的分享，这个是昨天的作业，小辣椒得悠着玩了，慢慢来了，看见这么多的 ...

今天事多，没空做帖

马黑黑 发表于 2023-9-3 23:10

之前封装的插件有一个小bug：调节进度时歌词不能同步。已经修复，按 Ctrl + F5 硬刷新可以查看效果。
bug是 @影子发现的，特此表示感谢。

小辣椒 发表于 2023-9-4 21:07

红影 发表于 2023-9-3 21:30
是的，这里的颜色呼应特别好呢

感觉这些频谱双色的特别漂亮

小辣椒 发表于 2023-9-4 21:09

亦是金 发表于 2023-9-3 21:43
问好小辣椒！收到你的礼物很是开心！感谢你的一路关照,致谢！

不客气啊，比我师父年龄都大的，很敬佩你的{:4_187:}

小辣椒 发表于 2023-9-4 21:09

亦是金 发表于 2023-9-3 21:45
帖子制作精美，欣赏学习了！

谢谢前辈的欣赏{:4_187:}

小辣椒 发表于 2023-9-4 21:10

马黑黑 发表于 2023-9-3 23:08
今天事多，没空做帖

黑黑先忙你自己的事，这里你的速度已经很快了

小辣椒 发表于 2023-9-4 21:12

马黑黑 发表于 2023-9-3 23:10
之前封装的插件有一个小bug：调节进度时歌词不能同步。已经修复，按 Ctrl + F5 硬刷新可以查看效果。
bug ...

好的，我重新下载js，红影太棒了，都发现了bug，小辣椒没有这个水平的

红影 发表于 2023-9-4 21:42

小辣椒 发表于 2023-9-4 21:07
感觉这些频谱双色的特别漂亮

是啊，特别漂亮呢{:4_204:}

马黑黑 发表于 2023-9-4 22:00

小辣椒 发表于 2023-9-4 21:12
好的，我重新下载js，红影太棒了，都发现了bug，小辣椒没有这个水平的

用的时候总会有觉得不对的

马黑黑 发表于 2023-9-4 22:00

小辣椒 发表于 2023-9-4 21:10
黑黑先忙你自己的事，这里你的速度已经很快了

嗯，我想应该放慢一点

查看完整版本: 等你归来（学习黑黑酹江月频谱欣赏）TO：亦是金