小辣椒 发表于 2026-6-6 23:15

忽然好想念 DJ 九零版

<style>
    @import 'https://638183.freep.cn/638183/web/api/audioplayer.css';

.pa { top:50px; --offsetX: 81px; color: lightblue; }

.bg-box{
    position:absolute;inset:0;z-index:-99;
    background:url('https://xlaj.cn/upfile/2026/06/06/0F.jpg') no-repeat center/cover;
}
.bg-play{
    background:url('https://xlaj.cn/upfile/2026/06/06/0F.gif') no-repeat center/cover !important;
}
    .player { width: 480px; bottom: 14px; }
    .btnFs { top: 25px; right: 20px; }
    #msvg { position: absolute; width: 15vw; height: 15vw; top: 30%; left:50%;transform:translateX(-50%); transition: .75s; opacity: 1; cursor: pointer;pointer-events:auto; }
    #cc { transform-box: fill-box; transform-origin: center; cursor: pointer; animation: rot 20s linear infinite var(--state); }
    #lrc { top: 80%; }

    .pd-vid{display:none;}
</style>

<div id="pa" class="pa">
    <div class="bg-box" id="bgWrap"></div>
    <video class="pd-vid" src="https://img2.tukuppt.com/video_show/2418175/00/02/20/5b51fecde9934.mp" autoplay loop muted></video>
    <svg id="msvg" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400"><title>播放/暂停(Alt+X)</title></svg>
</div>

<script>
    var gc = `怎么会忽然好想念
怎么会忽然好心酸
怎么会一下子
就触碰了我脆弱的泪点
忽然好想念 DJ 九零版
词：徐茧生
曲：徐茧生/路勇
凌晨两点半在街上游荡
路边摊零零散散
惺忪的睡眼 抬头天边
黑暗里的星星点点
热爱的画面
浮现在眼前
在脑海里默默回甜
只是他身影已经走太远
只留下我一个人孤单
怎么会忽然好想念
怎么会忽然好心酸
怎么会一下子
就触碰了我脆弱的泪点
怎么会忽然好茫然
怎么会忽然好孤单
怎么会心里面
只剩下了一个人的容颜
歌词同步编辑：小辣椒
热爱的画面
浮现在眼前
在脑海里默默回甜
只是他身影已经走太远
只留下我一个人孤单
怎么会忽然好想念
怎么会忽然好心酸
怎么会一下子
就触碰了我脆弱的泪点
怎么会忽然好茫然
怎么会忽然好孤单
怎么会心里面
只剩下了一个人的容颜
记忆被拉得太远
觉醒敌不过失眠
昨天欠下的泪水
今天一直在买单
怎么会呵
怎么会忽然好孤单
怎么会心里面
只剩下了一个人的容颜
谢谢欣赏
`;

    var options = {
      pa: '.pa',
      urls: [['https://wj.zp68.com/lxx/yunhua/2025/12/09/01.mp3', '忽然好想念']],
      btns: [],
    };

    let bgEl = document.getElementById('bgWrap');
    let audPlayer = null;
    let audioDom = null;
loadJs('https://638183.freep.cn/638183/web/api/audioplayer.min.js?v0', function() {
    loadJs('https://638183.freep.cn/638183/web/api/yslrc.min.js', function() {
      loadJs('https://638183.freep.cn/638183/svgdr/svgdr.min.js', tzRun);
    });
});
    function tzRun() {
      audPlayer = new AudPlayer(options);
      LRC(audPlayer.pa, audPlayer.aud, gc, 0.5);
      audioDom = audPlayer.aud;

      audioDom.addEventListener('play', function(){
            bgEl.classList.add('bg-play');
      });
      audioDom.addEventListener('pause', function(){
            bgEl.classList.remove('bg-play');
      });

      let msvg = document.getElementById('msvg');
      msvg.onclick = function(){
            if(audioDom.paused){
                audioDom.play();
            }else{
                audioDom.pause();
            }
      };

      var dr = _dr(msvg);
      dr.gradient('radialGradient', {id: 'grd', cx: '30%', cy: '25%', r: '70%'}, '<stop offset="0%" stop-color="#eff" /><stop offset="50%" stop-color="#4da6ff" /><stop offset="100%" stop-color="#003d82" />');
      dr.path('M-180 50 A90 80, 0, 0, 0, 180 -50', 'none', 'lightgreen', 4);
      dr.path('M-170 -50 A80 70, 0, 0, 0, 170 50', 'none', 'lightgreen', 5);
      dr.path('M-160 0 A60 55, 0, 0, 0, 160 0', 'none', 'lightgreen', 4);
      dr.circle(0, -20, 140, 'url(#grd)').id('cc');

      setTimeout(()=>{
            if(!audioDom.paused) bgEl.classList.add('bg-play');
      },200);
    }

    function loadJs(url, callback) {
      var script = document.createElement('script');
      script.charset = 'utf-8';
      script.src = url;
      script.onload = function() {
            if (callback) callback();
      };
      document.head.appendChild(script);
    }
</script>

小辣椒 发表于 2026-6-6 23:16

{:5_128:}{:5_128:}{:5_128:}

liumang 发表于 2026-6-6 23:42

小辣椒背景加了粒子效果
{:5_150:}{:5_150:}{:5_150:}

liumang 发表于 2026-6-6 23:43

双按钮联动背景一键停止，赞的！

{:5_146:}{:5_146:}{:5_146:}

liumang 发表于 2026-6-6 23:44

想念谁了{:6_198:}{:6_198:}

liumang 发表于 2026-6-6 23:44

欣赏小辣椒的精美制作{:5_122:}{:5_122:}{:5_122:}
页: [1]
查看完整版本: 忽然好想念 DJ 九零版