小辣椒 发表于 2024-11-3 20:08

等一个晴天-旋律版 (DJ版)


<style>
      #tz { margin: 130px 0 30px calc(50% - 721px); width: 1280px; height: 704px; background: url('https://xlaj.cn/upfile/202411/03/9.jpg') no-repeat center/cover; box-shadow: 1px 1px 4px gray; z-index: 1; position: relative;
border-radius:32px; }
      /* 加一个CSS变量 --deg: 360deg; */
      #mysvg { --state: running; --deg: 360deg; position: absolute; left: calc(70% - 100px); top: calc(65% - 100px); width: 300px; height: 300px; animation: rot 20s linear infinite var(--state); cursor: pointer; }
      .ball { filter: drop-shadow(-10px -10px 20px darkred); transition: .4s; cursor: pointer; animation: flash .1s var(--delay) linear infinite alternate var(--state); }
      .ball:hover { r: 14; }
      /* #mysvg:hover { --state: paused; } 换成下一句 */
      #mysvg:hover { --deg: -720deg; }
      #tz::before { content: attr(data-lrc); position: absolute;left: 180px; top:60px;width: 100%; height: 60px; text-align: center; font: normal 42px/60px LiSu; color: transparent; background: repeating-linear-gradient(to right, Indigo,BlueViolet,        Indigo ) 50%/100px 60px; -webkit-background-clip: text; }
      @keyframes flash { to { opacity: .5; } }
      @keyframes rot { to { transform: rotate(var(--deg)); } }
#dt2{ position: absolute; width:32px; height: 32px; top: 120px; left: 100px; }
#dt3{ position: absolute; width: 32px; height: 32px; top: 380px; left: 320px; }
#dt4{ position: absolute; width: 90px; height: 66px; top: 475px; left: 910px; }

</style>

<div id="tz" data-lrc="等一个晴天-旋律版">
      <audio id="aud" src="https://aod.cos.tx.xmcdn.com/storages/03cb-audiofreehighqps/B0/7F/GAqhtYsK_AJYACAAAAMo7-fI.m4a" autoplay loop></audio>

<img id="dt2" src="https://xlaj.cn/assets/file/zp/20231112124430.jpg " alt="" />
<img id="dt4" src="https://xlaj.cn/upfile/202411/03/6.gif " alt="" />
<img id="dt3" src="https://xlaj.cn/assets/file/zp/20231112124430.jpg " alt="" />

      <svg id="mysvg"></svg>
</div>

<script>
var sc = document.createElement('script');
sc.src = 'https://638183.freep.cn/638183/web/js/svgdr.js';
document.body.appendChild(sc);

sc.onload = () => {
      var dr = _dr(mysvg), balls = [];
      dr.path('M210.00 150.00,286.26 199.59,195.96 188.57,222.50 275.57,160.42 209.09,124.82 292.80,120.00 201.96,38.92 243.20,93.62 170.52,5.00 150.00,93.62 129.48,38.92 56.80,120.00 98.04,124.82 7.20,160.42 90.91,222.50 24.43,195.96 111.43,286.26 100.41z', 'none','none').id('path');
      var len = path.getTotalLength();
      for(var i = 0, tt = 72; i < tt; i ++) {
                var point = path.getPointAtLength(len / tt * i);
                var color = 'Indigo',       
                        delay = Math.random() * i * -0.1;
                dr.circle(point.x,point.y,5,color).set('class','ball').style(`--delay: ${delay}s`);
                balls.push(dr.elm);
      }
      //balls.forEach(b => b.onclick = () => {
      //      dr.svg.style.setProperty('--state', ['paused','running'][+aud.paused]);
      //      aud.paused ? aud.play() : aud.pause();
      //});
      mysvg.onclick = () => {
                mysvg.style.setProperty('--state', ['paused','running'][+aud.paused]);
                aud.paused ? aud.play() : aud.pause();
      }
         mysvg.onclick = () => {
                mysvg.style.setProperty('--state', ['paused','running'][+aud.paused]);
                aud.paused ? aud.play() : aud.pause();
      }
      aud.play().catch(_ => dr.svg.style.setProperty('--state', 'paused'));
};

var curkey = 0, lrcAr = [];
var getAr = (text) => {
    var ar = text.trim().split('\n');
    ar.sort();
    var reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
    ar.forEach(item => {
      let result = item.match(reg);
      let tmsg = parseInt(result) * 60 + parseInt(result) + parseInt(result) / 1000;
      lrcAr.push(.trim()]);
    });
};
aud.onseeked = () => curkey = 0;
aud.ontimeupdate = () => {
    if(curkey > lrcAr.length - 1) return;
    if(aud.currentTime >= lrcAr) {
      tz.dataset.lrc = lrcAr;
      curkey ++;
    }
};
var lrc = `
      阳光中风筝断了线
往事般落在我面前
那是谁忘了放风筝握紧一点
捡起了那年的秋天
阳光中我住雨里面
你给我风筝和蓝天
那是我忘了将幸福握紧一点
感谢你最后的相约
等一个晴天我们会再相见
你说了风吹我就听见
笑着说再见就一定会再见
心晴朗就看得到永远
等一个晴天我们会再相见
你说了风吹我就听见
笑着说再见就一定会再见
心晴朗就看得到永远
。。。。。。
阳光在抚摸我的脸
感觉到你还在身边
那是秋牵回忆的手温暖一点
我独自散步在昨天
阳光在照亮你的脸
难忘你微笑的双眼
那是你让离别可以晴朗一点
你背影我目送到今天
等一个晴天我们会再相见
你说了风吹我就听见
笑着说再见就一定会再见
心晴朗就看得到永远
等一个晴天我们会再相见
你说了风吹我就听见
笑着说再见就一定会再见
心晴朗就看得到永远
。。。。。。

`;
getAr(lrc);
</script>

小辣椒 发表于 2024-11-3 20:09

完成同一首{:5_154:}{:5_128:}

liumang 发表于 2024-11-3 20:37

小辣椒 发表于 2024-11-3 20:09
完成同一首

小辣椒完成了{:5_150:}{:5_150:}

liumang 发表于 2024-11-3 20:38

一对红人儿跳舞有趣的{:5_128:}{:5_128:}

liumang 发表于 2024-11-3 20:39

{:5_152:}{:5_152:}{:5_152:}

小辣椒 发表于 2024-11-8 21:33

liumang 发表于 2024-11-3 20:39


{:5_140:}{:5_140:}{:5_140:}
页: [1]
查看完整版本: 等一个晴天-旋律版 (DJ版)