执著 发表于 2024-5-1 19:03

临摹马导“Batau”-致敬劳动者

<style>
    #papa { margin: 20px 0 20px calc(50% - 721px); width: 1280px; height: 721px; background: purple url('http7s://pic.imgdb.cn/item/663103e20ea9cb14031ef1d9.jpg') no-repeat center/cover; overflow: hidden; box-shadow: 3px 3px 6px gray; display: grid; place-items: center; pointer-events: none; position: relative; }
    #papa:hover::before { opacity: 1; transform: scale(1.65, 1.65); }
    #papa::before, #papa::after { position: absolute; content: ''; pointer-events: auto; cursor: pointer; }
    #papa::before { left: 800px; bottom: 0; content: url('https://pic.imgdb.cn/item/663115540ea9cb1403492ba7.png'); opacity: 0; transition: 3s; filter: drop-shadow(6px 6px 16px snow); }

    #papa::after { left: 981px; content: ''; top: 140px; width: 200px; height: 200px; border-radius: 50%; box-shadow: inset 0 0 60px white; }

    .vid { position: absolute; object-fit: cover; }
    .vid:nth-of-type(1) {top: -5px; width: 100%; height: calc(100% ); mix-blend-mode: screen; }

    .vid:nth-of-type(2) {left: 981px;top: 130px; width: 200px; height: 200px; border-radius: 50%; mix-blend-mode: screen; }

</style>

<div id="papa">
    <audio id="aud" src="https://od.lk/s/NzBfMTY2MjAwNDNf/098-%E5%BD%AD%E4%B8%BD%E5%AA%9B-%E5%9C%A8%E5%B8%8C%E6%9C%9B%E7%9A%84%E7%94%B0%E9%87%8E%E4%B8%8A.mp3" autoplay loop></audio>

    <video class="vid" src="https://od.lk/s/NzBfMTY3Mzk3NjJf/%E4%BA%94%E4%B8%80%E5%8A%B3%E5%8A%A8%E8%8A%82.mp4" loop muted></video>

    <video class="vid" src="https://img.tukuppt.com/video_show/2402760/00/01/78/5b49f98b80cff.mp4" loop muted></video>   
</div>

<script type="text/javascript">

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

let geci = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];

sFile.onload = () => {
LRC({
                papa: '#papa',
                lrcAr: geci,
                btn: '.cube',
                lrc_css: 'left: 50%; transform: translate(-50%); bottom: 10px;',
        });
}       

(function() {
    let vids = document.querySelectorAll('.vid');
    let mState = () => vids.forEach(vid => aud.paused ? vid.pause() : vid.play());
    aud.onplaying = aud.onpause = () => mState();
    papa.onclick = () => aud.paused ? aud.play() : aud.pause();
})();

       
</script>

红影 发表于 2024-5-1 20:20

这个制作很完美，歌词同步也很准确。
欣赏执著好帖，借执著好帖，祝福天下的劳动者{:4_199:}

红影 发表于 2024-5-1 20:21

这个任务抠图很完美。{:4_204:}

执著 发表于 2024-5-1 20:37

红影 发表于 2024-5-1 20:21
这个任务抠图很完美。

谢谢老师鼓励哈，老师今天没有休息呀？

小文 发表于 2024-5-1 21:39

一个字（绝）

执著 发表于 2024-5-2 00:10

小文 发表于 2024-5-1 21:39
一个字（绝）

谢谢老师鼓励，祝老师节日快乐{:4_204:}

起个网名好难 发表于 2024-5-2 07:54

https://img95.699pic.com/photo/40114/0995.jpg_wh860.jpg

马黑黑 发表于 2024-5-2 09:13

很完美

红影 发表于 2024-5-2 16:11

执著 发表于 2024-5-1 20:37
谢谢老师鼓励哈，老师今天没有休息呀？

休息了呢，放假了，大家都休息呢{:4_187:}

小辣椒 发表于 2024-5-2 21:27

执著这个效果真漂亮，很完美的制作{:4_199:}

小辣椒 发表于 2024-5-2 21:28

五一节快乐！

执著 发表于 2024-5-3 00:23

起个网名好难 发表于 2024-5-2 07:54


谢谢老师临帖，祝老师节日快乐{:4_204:}

执著 发表于 2024-5-3 00:26

马黑黑 发表于 2024-5-2 09:13
很完美

谢谢马导鼓励，仅仅是模拟你的标作而已！遥祝老师节日快乐！{:4_204:}

执著 发表于 2024-5-3 00:27

小辣椒 发表于 2024-5-2 21:27
执著这个效果真漂亮，很完美的制作

谢谢老师鼓励，祝老师节日快乐，好好休息休息几天哈{:4_204:}

马黑黑 发表于 2024-5-3 10:33

执著 发表于 2024-5-3 00:26
谢谢马导鼓励，仅仅是模拟你的标作而已！遥祝老师节日快乐！

同祝同祝

小辣椒 发表于 2024-5-3 21:52

执著 发表于 2024-5-3 00:27
谢谢老师鼓励，祝老师节日快乐，好好休息休息几天哈

谢谢执著{:4_187:}
页: [1]
查看完整版本: 临摹马导“Batau”-致敬劳动者