等一个晴天-旋律版 (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>
@马黑黑
谢谢黑黑的源码分享{:4_187:} @红影
亲爱的，套用一个路径效果，小辣椒省力，省心的{:4_179:} 本帖最后由 梦江南 于 2024-11-3 17:36 编辑
好漂亮的画面，音乐节凑感强，过瘾！{:4_187:} 欣赏点赞，晚上好！ 梦江南 发表于 2024-11-3 17:36
欣赏点赞，晚上好！
谢谢梦江南，小辣椒先发帖下了，去吃饭了，晚上见{:4_171:} 小辣椒 发表于 2024-11-3 17:38
谢谢梦江南，小辣椒先发帖下了，去吃饭了，晚上见
好，再见！ https://img.soogif.com/olrt53z1tMMdY6VqE2K7nSCkMRVWeFe0.gif
有意思，还是正反转的 好听呢{:4_187:} 好漂亮，小播里两个跳舞的小人好有趣啊。
小播颜色和歌词颜色也很协调，欣赏亲爱的好帖{:4_187:} 亲爱的身体欠佳，还在努力做帖子，太不容易了{:4_179:} 这个漂亮 梦江南 发表于 2024-11-3 17:41
好，再见！
美女~~晚上好{:4_171:} 起个网名好难 发表于 2024-11-3 17:57
有意思，还是正反转的
难难晚上好，谢谢欣赏{:4_187:} 小九 发表于 2024-11-3 18:00
好听呢
小九感觉好听啊，这个是动感音乐{:4_208:} 红影 发表于 2024-11-3 18:49
好漂亮，小播里两个跳舞的小人好有趣啊。
小播颜色和歌词颜色也很协调，欣赏亲爱的好帖
亲爱的，你的路径，你的歌词同步代码{:4_205:} 红影 发表于 2024-11-3 18:51
亲爱的身体欠佳，还在努力做帖子，太不容易了
休息天就玩一下，平时会少玩了 马黑黑 发表于 2024-11-3 20:21
这个漂亮
黑黑晚上好{:4_180:} 醉美水芙蓉 发表于 2024-11-3 20:51
欣赏小辣椒漂亮贴子！
问好水芙蓉，谢谢欣赏{:4_171:}