执著 发表于 2024-4-10 21:23

临摹马导+南无月帖子代码：卷珠帘

本帖最后由 执著 于 2024-4-11 17:45 编辑 <br /><br /><style>
   #mydiv { margin: 120px 0 0 calc(50% - 831px);
   width: 1500px;
   height: 666px;
   box-shadow: 0 0 12px gray;
   background: url('https://pic.imgdb.cn/item/6616874b68eb935713d85bd6.jpg') 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://od.lk/s/NzBfMTY1NDU4MDdf/026-%E5%8D%B7%E7%8F%A0%E5%B8%98%28Live%29-%E9%9C%8D%E5%B0%8A.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: 30px;
                color: White;
                --bg: linear-gradient(180deg, OrangeRed, Red);
                opacity: .70;
            `,
            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>

执著 发表于 2024-4-10 21:26

本帖最后由 执著 于 2024-4-10 22:14 编辑

歌词颜色太暗了，我换过几个颜色代码没有效果！将透明度改大就好些了！

马黑黑 发表于 2024-4-10 22:22

执著 发表于 2024-4-10 21:26
歌词颜色太暗了，我换过几个颜色代码没有效果！将透明度改大就好些了！

很多因素共同作用

马黑黑 发表于 2024-4-10 22:24

这一路弄下来还是有收获的。但要注意劳逸结合，科目三该玩玩也要玩玩，不能只干一件事{:4_170:}

起个网名好难 发表于 2024-4-10 22:42

执著 发表于 2024-4-10 21:26
歌词颜色太暗了，我换过几个颜色代码没有效果！将透明度改大就好些了！

很诡异， 换颜色代码几乎不改变或改变微乎其微，偶尔改颜色出了错反倒歌词亮了起来。

font-size: 24px;// 把字改大点似乎显一些但还是很暗
color: hsl(;         //这肯定是个错误但歌词变为渐变色且亮了起来，一旦把这错误纠正就又暗了下去。

执著 发表于 2024-4-10 23:19

马黑黑 发表于 2024-4-10 22:24
这一路弄下来还是有收获的。但要注意劳逸结合，科目三该玩玩也要玩玩，不能只干一件事

我感觉也是收获很大{:4_173:}主要原因得益于马导的指导和你给我指明灯：后花园宝藏。再次感谢老师无私指点和奉献！{:4_204:}{:4_190:}

执著 发表于 2024-4-10 23:21

起个网名好难 发表于 2024-4-10 22:42
很诡异， 换颜色代码几乎不改变或改变微乎其微，偶尔改颜色出了错反倒歌词亮了起来。

font-size: 24px ...

老师晚上好！那就讲错就错，向老师学习！{:4_204:}{:4_190:}

马黑黑 发表于 2024-4-10 23:51

执著 发表于 2024-4-10 23:19
我感觉也是收获很大主要原因得益于马导的指导和你给我指明灯：后花园宝藏。再次感谢老师无私指 ...

{:4_191:}

起个网名好难 发表于 2024-4-11 06:18

执著 发表于 2024-4-10 23:21
老师晚上好！那就讲错就错，向老师学习！

在颜色表里找两个较亮的颜色应该可以，例如    --bg: linear-gradient(180deg, GreenYellow, SpringGreen);
或 linear-gradient(180deg, OrangeRed, Red)
或 linear-gradient(180deg, skyblue, Lime);
总之是挑亮色来搭配。

红影 发表于 2024-4-11 09:43

很漂亮的制作，霍尊就是因为这首歌曲出名的，再听仍然觉得好听极了{:4_199:}

红影 发表于 2024-4-11 09:46

整个歌画面的元素搭配和排布很好，歌曲的品质也很好，看这个帖子像在看演唱会，感觉真好。
欣赏执着好帖{:4_199:}

执著 发表于 2024-4-11 17:37

起个网名好难 发表于 2024-4-11 06:18
在颜色表里找两个较亮的颜色应该可以，例如    --bg: linear-gradient(180deg, GreenYellow, SpringGreen ...

好嘞，谢谢老师！{:4_190:}

执著 发表于 2024-4-11 17:41

红影 发表于 2024-4-11 09:46
整个歌画面的元素搭配和排布很好，歌曲的品质也很好，看这个帖子像在看演唱会，感觉真好。
欣赏执着好帖{: ...

谢谢老师鼓励！{:4_204:}“革命尚未成功，同志仍须努力”

执著 发表于 2024-4-11 17:43

马黑黑 发表于 2024-4-10 23:51


{:4_191:}

马黑黑 发表于 2024-4-11 17:55

执著 发表于 2024-4-11 17:43


{:4_191:}

红影 发表于 2024-4-11 22:39

执著 发表于 2024-4-11 17:41
谢谢老师鼓励！“革命尚未成功，同志仍须努力”

嗯嗯，继续加油{:4_187:}

世外桃源 发表于 2024-4-12 14:29

好听的歌

世外桃源 发表于 2024-4-12 14:30

欣赏佳作 感谢分享

执著 发表于 2024-4-12 15:57

世外桃源 发表于 2024-4-12 14:30
欣赏佳作 感谢分享

谢谢老师光临及鼓励{:4_204:}

小辣椒 发表于 2024-4-12 22:40

执著这个制作不错{:4_199:}
页: [1] 2
查看完整版本: 临摹马导+南无月帖子代码：卷珠帘