浪人 发表于 2023-8-31 15:25

熊二宝-究竟是为什么(DJ默涵伤感版)

<html lang="en">
<head>
<meta charset="utf-8" />
<title>山里人LRC音乐在线</title>
<style>
        #papa { margin: auto; width: 1024px; height: 640px; background: url('https://shanlr.s3-us-east-1.ossfiles.com/tp/yf/f6.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; }
        li-zi { position: absolute; top: 0; background: linear-gradient(to bottom, transparent, snow); animation: drop var(--dur) var(--delay) infinite linear var(--state); }
        @keyframes drop { to { top: 100%; } }
#vid {
        position: absolute;
        width: 100%;
        height: 110%;
        top:-50px;
      left: -00;
        object-fit: cover;
        pointer-events: none;
        mix-blend-mode: screen;
   border-radius:5px 0px 5px;
        z-index: 2;
        opacity: 0.25;
}

   
</style>
</head>
<body>


<div id="papa"></div>

<audio id="aud" crossorigin="anonymous" src="https://shanlr.s3-us-east-1.ossfiles.com/yu/jjwsm.mp3" autoplay></audio>

<video id="vid" src=" " autoplay="" loop="" muted=""></video>   

<script>
       
(function() {
        let script = document.createElement('script');
        script.src = 'https://shanlr.s3-us-east-1.ossfiles.com/js/xyosc_lrc.js';
        script.charset = 'utf-8';
        document.head.appendChild(script);
        let geci = [ ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ];
       script.onload = () => {
                HCPlayer({
                        papa: '#papa',
                        lrcAr: geci,
                        lrc_css: `
                              left: 35%;
                              top:480px;
                              color: AliceBlue;
                              --bg: linear-gradient(rgba(0,120,0,.15),rgba(0,120,00,.95));
                        `,
                        player_css: `
                              bottom: 0%;
                              left: 15%;
                              --ww: 700px;
                        `,
                        pinpu: { size: 2, gap: 0.5, color1: 'rgba(0,255,0,.95)', color2: 'Snow'},

                });
      };
        Array.from({length: 70}).forEach((item) => {
                item = document.createElement('li-zi');
                item.style.cssText += `
                        --dur: ${0.4 + Math.random() * 0.4}s;
                        --delay: ${Math.random() * -0.8}s;
                        width: ${1 + Math.round(Math.random())}px;
                        height: ${8 + Math.random() * 30}px;
                        left: ${Math.random() * 100}%;
                `;
                papa.appendChild(item);
        });
})();

</script>

</body>
</html>

容轩听雨 发表于 2023-8-31 21:28

画面灵动，歌曲蕴籍，歌曲寄怀，感受情怀，问好老师！

蓝魔 发表于 2023-8-31 21:35

欣赏一下，谢谢。

巫荣云师 发表于 2023-9-2 20:03

欣赏收藏老师的代码佳作，点赞！老师制作辛苦了！问好老师！
页: [1]
查看完整版本: 熊二宝-究竟是为什么(DJ默涵伤感版)