论坛 › 音乐沙龙 › 碧瑶 - 小池塘

马黑黑 发表于 2024-5-13 11:58

碧瑶 - 小池塘

本帖最后由 马黑黑 于 2024-5-13 20:06 编辑 <br /><br /><style>
        #tiezi { margin: -60px 0 20px calc(50% - 593px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t24/2/pool.jpg') no-repeat center/cover; box-shadow: 3px 3px 6px #000; overflow: hidden; z-index: 1; display: grid; place-items: center; position: relative; }
        #tiezi > canvas:nth-of-type(1) { position: absolute; top: 180px; cursor: pointer; }
        #tiezi > video:nth-of-type(1) { position: absolute; right: -350px; top: 0; width: 100%; height: 40%; transform: rotate(30deg);
mix-blend-mode: multiply; }
        #tiezi > img:nth-of-type(1) { position: absolute; bottom: 20px; width: 200px; cursor: pointer; user-select: none; transform-origin: 50% 100%; animation: swear linear .25s infinite alternate var(--state); }
        @keyframes swear { from { transform: skewY(5deg); } to { transform: skewY(-5deg); } }
</style>

<div id="tiezi">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1870859270" autoplay></audio>
        <img id="mypic" src="https://638183.freep.cn/638183/t24/2/g1.png" alt="" />
        <video src="https://img.tukuppt.com/video_show/2269348/00/17/44/5ec49820da8aa.mp4" loop muted></video>
        <canvas width="180" height="180"></canvas>
</div>

<script>
        var files = [
                'https://638183.freep.cn/638183/web/js2024/lrc_only.js',
                'https://638183.freep.cn/638183/web/js2024/3dball.js'
        ];
        files.forEach((_, key) => {
                var sF = document.createElement('script');
                sF.charset = 'UTF-8';
                sF.src = files;
                document.body.appendChild(sF);
                sF.onload = () => {
                        if(key === 0) {
                                LRC({
                                        papa: '#tiezi',
                                        lrc_css: 'top: 10px;',
                                        lrcAr: geci
                                });
                        }
                        else mypic.onclick = () => aud.paused ? aud.play() : aud.pause();
                };
        });

        var lz = {papa: tiezi, total: 350, r: 4, color: 'rgba(144,238,144,.6)'};
        var geci = [,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,];
</script>

马黑黑 发表于 2024-5-13 12:13

相关说明移步：

《碧瑶 - 小池塘》所使用的JS资源相关说明 - 马黑黑教程专版 - 花潮论坛 - Powered by Discuz! (huachaowang.com)

南无月 发表于 2024-5-13 12:45

清新自然，童趣可爱，这贴子看着就令人愉悦~~

马黑黑 发表于 2024-5-13 12:46

南无月 发表于 2024-5-13 12:45
清新自然，童趣可爱，这贴子看着就令人愉悦~~

{:4_190:}

南无月 发表于 2024-5-13 12:47

球状粒子，看着跟之前那个排列规则的有点不太一样。。
画布加歌词，有歌词版可以使用了。。{:4_199:}

马黑黑 发表于 2024-5-13 12:49

南无月 发表于 2024-5-13 12:47
球状粒子，看着跟之前那个排列规则的有点不太一样。。
画布加歌词，有歌词版可以使用了。。

实现理念不尽相同

南无月 发表于 2024-5-13 12:51

马黑黑 发表于 2024-5-13 12:46


要用大咖提神一下么。。午休到了呢

南无月 发表于 2024-5-13 12:52

马黑黑 发表于 2024-5-13 12:49
实现理念不尽相同

看着也不相同。。

马黑黑 发表于 2024-5-13 12:52

南无月 发表于 2024-5-13 12:51
要用大咖提神一下么。。午休到了呢

不急慢慢来

马黑黑 发表于 2024-5-13 12:52

南无月 发表于 2024-5-13 12:52
看着也不相同。。

是不同的

愤怒的葡萄 发表于 2024-5-13 15:07

原来是一首儿歌啊。

南无月 发表于 2024-5-13 17:55

马黑黑 发表于 2024-5-13 12:52
不急慢慢来

不急，也急不来。跟贴光创意都要想好久。。
有的老师的贴子感觉已是极致，很难有新的创意

南无月 发表于 2024-5-13 17:56

马黑黑 发表于 2024-5-13 12:52
是不同的

{:4_187:}必须不同，老师基本不发相同贴

马黑黑 发表于 2024-5-13 17:56

南无月 发表于 2024-5-13 17:55
不急，也急不来。跟贴光创意都要想好久。。
有的老师的贴子感觉已是极致，很难有新的创意

顾虑太多有点麻小烦

马黑黑 发表于 2024-5-13 17:57

南无月 发表于 2024-5-13 17:56
必须不同，老师基本不发相同贴

这难说

马黑黑 发表于 2024-5-13 17:58

愤怒的葡萄 发表于 2024-5-13 15:07
原来是一首儿歌啊。

是的

起个网名好难 发表于 2024-5-13 19:57

本帖最后由 起个网名好难 于 2024-5-13 20:01 编辑

赞！

评分后就不动态表演了{:5_106:}

马黑黑 发表于 2024-5-13 20:05

起个网名好难 发表于 2024-5-13 19:57
赞！

评分后就不动态表演了

汗颜

起个网名好难 发表于 2024-5-13 20:07

马黑黑 发表于 2024-5-13 20:05
汗颜

休息一会会…………

山人 发表于 2024-5-13 20:07

起个网名好难 发表于 2024-5-13 19:57
赞！

评分后就不动态表演了

现在可以了。还是那个 let 问题，俺纠结{:4_170:}

查看完整版本: 碧瑶 - 小池塘