南无月 发表于 2024-2-25 18:32

【黑师代码】单依纯-想你时风起(学习黑师《殊途同归》meter频谱效果)

<style>
   #mydiv { margin: 120px 0 0 calc(50% - 931px);
   width: 1700px;
   height: 900px;
   box-shadow: 0 0 12px gray;
   background: url('https://pic.imgdb.cn/item/65509efbc458853aefbe97db.webp') no-repeat center/cover;
   overflow: hidden;
   z-index: 1;
   position: relative;
   display: grid;
   place-items: center;
   --state: running;
}

#mydiv > img { transform: translate(30px); mix-blend-mode: screen;opacity: .50;}
#vid {
    position: absolute;
    width: 60%;
    height: 110%;
    top:-60px;
    left:1px;
    object-fit: cover;
    pointer-events: none;
    mix-blend-mode: screen;
    z-index: 2;
    opacity: .23;
}

</style>

<div id="mydiv"></div>
<audio id="aud" src="https://aimg8.dlssyht.cn/u/1786604/ueditor/file/894/1786604/1706799583501766.mp3" loop="loop" autoplay="autoplay"></audio>

<script>
   (function() {
    let js1 = 'https://638183.freep.cn/638183/web/api/meter_pinpu_lrc.js',
      js2 = 'https://638183.freep.cn/638183/web/lizi/h5lz_2d.js';
    let loadJs = (url,callback) => {
      let body = document.querySelector('body'), jsNode = document.createElement('script');
      jsNode.charset = 'utf-8';
      jsNode.setAttribute('src', url);
      body.appendChild(jsNode);
      jsNode.onload = () => callback();
    };

    loadJs(js1, () => {
      let geci = [, , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ];
      HCPlayer({
            papa: '#mydiv',
            lrcAr: geci,
            fs_css: 'left: 50px; bottom:50px; background: transparent;',
            lrc_css: `
                top: 10px;
                font-size: 20px;
                color: WhiteSmoke;
                --bg: linear-gradient(180deg, White, SlateGray);
                opacity: .26;
            `,
            player_css: `
                bottom: 10px;
                color: snow;
                z-index: 10;
            `,
            pinpu: { num: 40, width: 3, color: 'rgba(255,255,255,.5)' },
      });
    });

    loadJs(js2, () => {
      H5lz({
            papa: '#mydiv',
            total: 160,
            size: {width: 3, height: 2},
            shape: {background: '', borderRadius: '50%'},
            maxTime: 24,
            offset: {x: 0, y: 0},
            ani: 'out2C',
            css: 'opacity: .95; box-shadow: inset 0 0 8px #fff;',
      });
    });
})();

</script>
<Br><Br><Br><Br>

南无月 发表于 2024-2-25 18:34

@马黑黑 刚发现原来不光是改了三楼着色代码,一楼的代码老师也顺手修正了。。{:4_190:}

南无月 发表于 2024-2-25 18:34

单依纯的这首歌十分好听~~

红影 发表于 2024-2-25 19:04

这画面那么协调,氛围及标题字及歌曲和动态效果,都是说不出的美。
欣赏月儿好帖{:4_199:}

马黑黑 发表于 2024-2-25 19:34

南无月 发表于 2024-2-25 18:34
@马黑黑 刚发现原来不光是改了三楼着色代码,一楼的代码老师也顺手修正了。。

一楼我木有动吧?不敢动的

南无月 发表于 2024-2-25 19:44

马黑黑 发表于 2024-2-25 19:34
一楼我木有动吧?不敢动的

有记录呀。。给学生改作业正常得很,老师这么说就奇了。。还用上不敢。。更奇了。。
学生十分感动。。{:4_173:}谢谢老师。。{:4_190:}

南无月 发表于 2024-2-25 19:45

红影 发表于 2024-2-25 19:04
这画面那么协调,氛围及标题字及歌曲和动态效果,都是说不出的美。
欣赏月儿好帖

影子的夸奖记下啦,十分感谢一路鼓励支持{:4_187:}

马黑黑 发表于 2024-2-25 19:45

南无月 发表于 2024-2-25 19:44
有记录呀。。给学生改作业正常得很,老师这么说就奇了。。还用上不敢。。更奇了。。
学生十分感动。。{: ...

那可能是俺喝多了。俗话说,酒后壮胆{:4_170:}

南无月 发表于 2024-2-25 19:58

马黑黑 发表于 2024-2-25 19:45
那可能是俺喝多了。俗话说,酒后壮胆

{:4_170:}幽默。。。乐了乐了。。。亏你想得出来这个理由。

马黑黑 发表于 2024-2-25 20:00

南无月 发表于 2024-2-25 19:58
幽默。。。乐了乐了。。。亏你想得出来这个理由。

确实喝多了呀

南无月 发表于 2024-2-25 20:12

马黑黑 发表于 2024-2-25 20:00
确实喝多了呀

这会儿喝多了。{:4_170:}

红影 发表于 2024-2-25 20:38

南无月 发表于 2024-2-25 19:45
影子的夸奖记下啦,十分感谢一路鼓励支持

这画面十分有感,月儿是营造氛围的高手{:4_199:}

马黑黑 发表于 2024-2-25 21:08

南无月 发表于 2024-2-25 20:12
这会儿喝多了。

挺好挺好

樵歌 发表于 2024-2-25 21:14

多么的艺术范儿,这怕是整合了各种高等级技术合成的音画{:4_199:}

南无月 发表于 2024-2-26 18:07

红影 发表于 2024-2-25 20:38
这画面十分有感,月儿是营造氛围的高手

画面一般,影子感觉比较好。。{:4_187:}

南无月 发表于 2024-2-26 18:07

马黑黑 发表于 2024-2-25 21:08
挺好挺好
{:4_173:}那就放心了

南无月 发表于 2024-2-26 18:08

樵歌 发表于 2024-2-25 21:14
多么的艺术范儿,这怕是整合了各种高等级技术合成的音画

感谢樵管支持鼓励。。

红影 发表于 2024-2-26 19:26

南无月 发表于 2024-2-26 18:07
画面一般,影子感觉比较好。。

很喜欢这样的氛围感,引人遐思的画面{:4_187:}

马黑黑 发表于 2024-2-26 19:45

南无月 发表于 2024-2-26 18:07
那就放心了

那必须的

南无月 发表于 2024-2-26 19:46

红影 发表于 2024-2-26 19:26
很喜欢这样的氛围感,引人遐思的画面

能让影子喜欢那真的是太好了{:4_187:}
页: [1] 2 3
查看完整版本: 【黑师代码】单依纯-想你时风起(学习黑师《殊途同归》meter频谱效果)