小辣椒 发表于 2024-5-16 20:44

柔情深种 歌手：高胜美


<style>
        #papa { margin: 150px 0 20px calc(50% - 721px); width: 1280px; height: 700px; background: lightblue; box-shadow: 3px 3px 6px gray; z-index: 1; overflow: hidden; user-select: none; display: grid; place-items: center; position: relative; }
        .vid { position: absolute;width: 130%; height: 130%; object-fit: cover; }
        .vid:nth-of-type(2) {mix-blend-mode: screen; }
        .vid:nth-of-type(3) { width: 160px; height: 160px; left: 100px; top:70px; border-radius: 50% 50% 50% 50%; cursor: pointer; }

#dt4{ position: absolute; width: 315px; height: 458px; top: 255px; left: 820px; z-index: 1000 }
#dt5{ position: absolute; width: 32px; height: 32px; top: 105px; left: 925px; z-index: 1000;}

</style>

<div id="papa">


<img id="dt4" src="https://xlaj.cn/assets/file/zp/20240516135701.png" alt="" />
<img id="dt5" src="https://xlaj.cn/assets/file/zp/20231112124430.jpg " alt="" />

        <audio id="aud" src="https://xlaj.cn/assets/file/zp/20240115210416.mp3" autoplay loop></audio>
        <video class="vid" src="https://vlkv-1254134120.cos.ap-guangzhou.myqcloud.com/tkyr.mp4" poster="https://xlaj.cn/assets/file/zp/20240115210248.jpg" disablePictureInPicture loop muted></video>
        <video class="vid" src="https://vlkv-1254134120.cos.ap-guangzhou.myqcloud.com/jgbw.mp4" disablePictureInPicture loop muted></video>
        <video class="vid" id="player" src="https://vlkv-1254134120.cos.ap-guangzhou.myqcloud.com/liux.mp4" poster="https://xlaj.cn/assets/file/zp/20240516135740.png" title="播放/暂停" disablePictureInPicture loop muted></video>
</div>

<script>
        var sF = document.createElement('script');
        sF.charset = 'UTF-8';
        sF.src = 'https://638183.freep.cn/638183/web/js2024/lrc_only.js';
        document.body.appendChild(sF);
        sF.onload = () => {
                LRC({
                        papa: '#papa',
                        lrc_css: 'top: 40px; color: AliceBlue; --bg: linear-gradient(rgba(0,0,128,.2), rgba(0,0,255,.6))',
                        lrcAr: geci,
                        btn: '#player'
                });
                aud.onplaying = aud.onpause = () => mState();
                player.onclick = () => aud.paused ? aud.play() : aud.pause();
        };
        var mState = () => {
                let vids = papa.querySelectorAll('video');
                vids.forEach(vid => aud.paused ? vid.pause() : vid.play());
                papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        };
        papa.oncontextmenu = (e) => e.preventDefault();
        var geci = [ ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ];
</script>

liumang 发表于 2024-5-16 20:46

{:5_150:}{:5_150:}{:5_150:}

liumang 发表于 2024-5-16 20:46

动感效果真美

小辣椒 发表于 2024-5-16 20:47

liumang 发表于 2024-5-16 20:46
动感效果真美

liumang 真快啊

小辣椒 发表于 2024-5-16 20:47

liumang 发表于 2024-5-16 20:46
动感效果真美

三个视频做的背景效果

liumang 发表于 2024-5-16 20:48

小辣椒 发表于 2024-5-16 20:47
三个视频做的背景效果

动感效果好漂亮{:5_150:}

小辣椒 发表于 2024-5-16 21:00

liumang 发表于 2024-5-16 20:48
动感效果好漂亮

谢谢欣赏

liumang值班辛苦{:5_149:}
页: [1]
查看完整版本: 柔情深种 歌手：高胜美