雨声 发表于 2023-11-27 23:29

【雨声音画】道一声岁月安好

<style>
#papa {
        margin: 0 0 0 calc(50% - 931px);
        width: 1600px;
        height: 800px;
      top:100px;
        background: url('https://www.dlbbs.com/data/attachment/forum/202311/27/233008mwagwkfsjqbfsmjk.jpg') no-repeat center/cover;
        box-shadow: 4px 4px 8px black;
        overflow: hidden;
        display: grid;
        place-items: center;
        z-index: 1;
        position: relative;
        --state: running;
}
#vid1 {
        position: absolute;
        width: 120%;
        height: 120%;
        top:-100px;
        left:-301px;
        object-fit: cover;
        pointer-events: none;
        mix-blend-mode: screen;
        z-index:3;
        opacity: .66;
}
#vid2 {
        position: absolute;
        width: 100%;
        height: 110%;
        top:-80px;
        object-fit: cover;
        pointer-events: none;
        mix-blend-mode: screen;
        z-index: 5;
        opacity: .19;
}
</style>

<div id="papa">
        <video id="vid1" src="https://img.tukuppt.com/video_show/2269348/00/14/92/5e67b21fa8e26.mp4" autoplay="" loop="" muted=""></video>
        <video id="vid2" src="https://img.tukuppt.com/video_show/2405811/00/70/22/607f0a9c8e2cf.mp4" autoplay="" loop="" muted=""></video>
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=281072" autoplay="" loop=""></audio>
</div>

<script>

(function() {
        let script = document.createElement('script');
        script.src = 'https://638183.freep.cn/638183/web/api/anklet_lrc.js';
        script.charset = 'utf-8';
        document.head.appendChild(script);
        let geci = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
        ];
        script.onload = () => {
                HCPlayer({
                        papa: '#papa',
                        lrcAr: geci,
                        lrc_css: 'top: 730px; --bg: linear-gradient(rgba(240,240,180,.2),rgba(240,240,180,.4)); color: Wheat;',
                        fs_css: 'background: transparent; color: white; left:5%; bottom:5%;',
                        player_css: `
                                top: 530px;
                                left:430px;
                                border-width: 0;
                                color: #fff;
                                --size: 160px;
                                --bRad: 30%;
                                --track: gray;
                                --prog: lightblue;
                                --btnBg: linear-gradient(orange, snow);
                        `,
                        lizi: { color1: 'lightyellow', color2: 'silver' },
                });
        };
        [...new Array(5).keys()].forEach((e,k) => {
                e = document.createElement('span');
                e.className = 'meteor';
                e.style.cssText += `
                        left: ${10 * Math.random()}%;
                        top: ${10 * Math.random()}%;
                        --du: ${3 + Math.random() * 2}s;
                        --delay: -${Math.random() * 1}s;
                        --ww: ${25 + Math.random() * 10}px;
                `;
                papa.appendChild(e);
        });
})();

papa.onclick = () => aud.paused ? (vid1.pause(),vid2.pause()) : (vid1.play(),vid2.play());

</script>
<br><br><br><br><br><br><br><br><br><br>

雨声 发表于 2023-11-27 23:30


雨声 发表于 2023-11-27 23:31

祝朋友们岁月安好！{:10_401:}

雨声 发表于 2023-11-27 23:32

今日排名: 第20位摇一摇 获得49纹银 ,排名11
还不错{:9001:}

墨羽 发表于 2023-11-27 23:56

清浅岁月，朋友安好，感谢带来唯美的音画，治愈系！{:10_403:}{:10_403:}{:10_403:}

雨声 发表于 2023-11-29 21:45

墨羽 发表于 2023-11-27 23:56
清浅岁月，朋友安好，感谢带来唯美的音画，治愈系！ ...

谢谢老大临帖支持鼓励，遥祝一切安好！

瞳萤 发表于 2023-11-30 19:21

这正是岁月静好的样子啊，图图美美哒
页: [1]
查看完整版本: 【雨声音画】道一声岁月安好