zlpi@163.com 发表于 2025-1-14 17:03:27

版主请帮我开通网盘

<style>
        #papa {
      margin: 20px-130px;
      width: 1200px;
      height: 640px;
      background:#000000 url('https://ln2018.oss-cn-hangzhou.aliyuncs.com/2025/tp/12.jpg')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: 300px; bottom: 100px; font: bold 2.4em sans-serif; color: silver; text-shadow: 1px 1px 1px rgba(181,0,0,.95); --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="1100" height="250"style="position: absolute; left:30px; top: 440px;"></canvas>
<audio id="aud" src="https://aod.cos.tx.xmcdn.com/storages/58ae-audiofreehighqps/60/47/GKwRIUELW9kpABnuBQNUkJA6.m4a" 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="https://ln2018.oss-cn-hangzhou.aliyuncs.com/2024/tp/hxxb.webp" 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);

        analyser.connect(Act.destination);

        let ctx = canv.getContext('2d');

        let width = canv.width;

        let height = canv.height;

        let ppColor = ctx.createLinearGradient(150,100,150,0);

        ppColor.addColorStop(0.6, '#00ff00');

        ppColor.addColorStop(0.4, '#00ff00');

        ppColor.addColorStop(0, '#00ff00');

        let ppNum = 200;

        let voiceHeight = new Uint8Array(analyser.frequencyBinCount);



        (function draw() {

                analyser.getByteFrequencyData(voiceHeight);

                let step = Math.round(voiceHeight.length / ppNum);

                ctx.clearRect(0, 0, width, height);

                for (let j = 0; j < ppNum; j++) {

                        let audiheighteight = voiceHeight;

                        ctx.fillStyle = ppColor;

                        ctx.fillRect(width / 2 + (j * 8), height, 4, -audiheighteight);

                        ctx.fillRect(width / 2 - (j * 8), height, 4, -audiheighteight);

                }

                window.requestAnimationFrame(draw);

        })();

        canv.onclick = () => aud.paused ? aud.play() : aud.pause();

})();

</script>




醉美水芙蓉 发表于 2025-1-14 17:51:05

山里人老师好久不见！

醉美水芙蓉 发表于 2025-1-14 17:51:20

欣赏老师的精彩音画！

醉美水芙蓉 发表于 2025-1-14 17:55:22

老师网盘已开通！请老师试一下！

醉美水芙蓉 发表于 2025-1-14 17:58:39

祝在纳兰音画玩得开心！

醉美水芙蓉 发表于 2025-1-14 18:04:16

请老师更换头像！
页: [1]
查看完整版本: 版主请帮我开通网盘