月明工作室 发表于 2026-5-7 10:07:25

都怪这多情的红尘 -代码来源山里人老师

<style>
        #papa {
      margin: 30px-50px;
      width: 1600px;
      height: 850px;
      background:#000000 url('http://cccimg.com/view.php/43e89fb3a921b9122bc52e51597edad4.png')no-repeat center/cover;
      box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 2px #000000; position: relative; overflow: hidden;
      display: grid;
      place-items: center;
      }
        #lrc { position: absolute; left: 650px; bottom: 100px; font: bold 3.0em sans-serif; color: silver; text-shadow: 1px 1px 1px rgba(105,105,105); --ani: lrcGo1; --duration: 1s; }
        #lrc::before { position: absolute; content: attr(data-lrc); width: 100%; height: 100%; color: transparent; background: linear-gradient(white, red); background-clip: text; -webkit-background-clip: text; clip-path: inset(0 100% 0 0); animation: var(--ani) var(--duration) linear forwards var(--state); }
        #mplayer { position: absolute; right: 10px; bottom: 10px; text-align: center; color: pink; }
        #mplayer::before { position: absolute; content: attr(data-tt); left: 0; bottom: 25px; width: 100%; text-align-last: justify; }
        #mprog { width: 280px; accent-color: Blue; outline: none; cursor: pointer; opacity: .7; }
        #mprog:focus { accent-color: red; }
        #btnplay { width: 50px; height: 50px; cursor: pointer; animation: rotating 6s infinite linear var(--state); }
        #btnplay:hover { filter: invert(.2); }
        #btnFs { position: absolute; bottom: 100px; color: silver; background: none; opacity: 0; border: 2px solid silver; border-radius: 6px; padding: 4px; transition: all .25s; cursor: pointer; z-index: 100; }
        #papa video { position: absolute; bottom: 0; width: 100%; height: calc(100% + 100px); object-fit: cover; mix-blend-mode: soft-light; pointer-events: none; }
        @keyframes rotating { to { transform: rotate(360deg); } }
        @keyframes lrcGo0 { to { clip-path: inset(0 0 0 0); } }
        @keyframes lrcGo1 { to { clip-path: inset(0 0 0 0); } }
        @keyframes move { to { offset-distance: 100%; } }
   
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%; } }
   
</style>

<div id="papa">
        <canvas id='canv' width="1600" height="420"style="position: absolute; left:1px; top: 460px;"></canvas>
<audio id="aud" src="https://sharefs.kugou.com/202605061027/4590e151e783d8af2b75a6152a01a681/v3/65e2491b5523ab18f756475dc22cf7ee/yp/full/ap1000_us0_pi409_s2232857388.mp3" loop="loop" autoplay="autoplay" crossOrigin="anonymous"></audio>
        <video src="" muted loop></video>
<video src="" muted loop></video>       

        <div id="mplayer" data-tt="0:00 0:00">
                <img id="btnplay" src="http://cccimg.com/view.php/f55c611cdb24309b9212dfc8ddd8b02e.png" title="播放/暂停" alt="" /><br>
                <input id="mprog" type="range" min="0" max="100" step="any" value="0" title="调节进度"    />
        </div>
        <div id="btnFs">全屏观赏</div>
        <div id="lrc" data-lrc="HuaChao LRC">HuaChao LRC</div>
</div>


<script>
        let geci = [        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
];
        var sF = document.createElement('script');
        sF.charset = 'utf-8';
        sF.src = 'https://ln2018.oss-cn-hangzhou.aliyuncs.com/2024/dpp/rangelrc_fs.js';
        document.querySelector('body').appendChild(sF);
Array.from({length: 56}).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() * 15}px;
                        left: ${Math.random() * 100}%;
                `;
                papa.appendChild(item);
        });

</script>
<script>
(function () {

        let Act = new AudioContext();

        let audSrc = Act.createMediaElementSource(aud);

        let analyser = Act.createAnalyser();

        audSrc.connect(analyser);

月明工作室 发表于 2026-5-7 10:19:50

本帖最后由 月明工作室 于 2026-5-8 09:12 编辑 <br /><br /><div style="position:absolute;z-index:32768;background:none;width:100%;left:25px;margin-top:80px;"><center><iframe src="https://file.uhsea.com/2605/e54007a9d8fbf8bf94f1f086238b8c7436.html" width="1550" height="900" marginwidth="0" marginheight="0" frameborder="0" scrolling="no" allow="fullscreen"></iframe></center></div><div style="height:800px"></div><br><br><br><br><br><br><br>

醉美水芙蓉 发表于 2026-5-7 12:30:37

欣赏老师带来精彩音画！

月明工作室 发表于 2026-5-7 15:42:05

醉美水芙蓉 发表于 2026-5-7 12:30
欣赏老师带来精彩音画！

谢谢芙蓉老师鼓励！
页: [1]
查看完整版本: 都怪这多情的红尘 -代码来源山里人老师