负心的你---TO：风中飞尘
<style>
#papa { left: -344px; width: 1280px; height: 710px; top:150px;display: grid; place-items: center; background: teal url('https://pic.imgdb.cn/item/6305bdfc16f2c2beb163da86.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; z-index: 3; }
#canv { position: absolute; bottom: 30px; cursor: pointer; box-reflect: below 0 linear-gradient(transparent, transparent 50%, rgba(255,255,255,.3)); -webkit-box-reflect: below 0 linear-gradient(transparent, transparent 50%, rgba(255,255,255,.3)); }
#lrcbox { position: absolute; left: 500px; top: 280px; font: bold 30px / 40px sans-serif; color: MintCream; text-shadow: 1px 1px 2px #000, 10px 10px 10px rgba(0, 0, 0, .35); user-select: none; }
</style>
<div id="papa">
<canvas id="canv"></canvas>
<span id="lrcbox">小辣椒音乐欣赏</span>
</div>
<script>
let ctx = canv.getContext('2d'),
w = canv.width =750,
h = canv.height = 60,
lines = [],
total = 80,
lineWidth = (w - 2 * total) / total,
aud = new Audio();
let lrcAr = [
['0.00','负心的你--歌手：云南三怪'],
['9.95','帖赠：风中飞尘'],
['17.50','驻立在船头'],
['19.73','想挥挥我的手'],
['22.75','奈何气笛催你走'],
['28.51','冰冷的风雨是阵阵吹起'],
['34.21','随着那波涛声'],
['36.96','无情地落下去'],
['40.10','紧闭的双眼中'],
['43.14','想着你的情'],
['46.06','虽然你离去'],
['48.83','永远难忘记'],
['51.57','冰冷的风雨刺中我的心'],
['57.37','哎哟你呀你没良心'],
['63.45','汽笛声渐渐走'],
['65.94','我心也被带走'],
['68.78','风雨依然滴滴落'],
['73.30','看着你的背影消逝无踪'],
['80.70','喊也喊不停'],
['83.39','叫也叫不醒'],
['86.74','LRC编辑：小辣椒'],
['104.38','驻立在船头'],
['106.60','想挥挥我的手'],
['109.50','奈何气笛催你走'],
['115.38','冰冷的风雨是阵阵吹起'],
['121.04','随着那波涛声'],
['123.83','无情地落下去'],
['126.88','紧闭的双眼中'],
['130.06','想着你的情'],
['132.60','虽然你离去'],
['135.68','永远难忘记'],
['138.32','冰冷的风雨刺中我的心'],
['144.15','哎哟你呀你没良心'],
['150.21','汽笛声渐渐走'],
['152.77','我心也被带走'],
['155.64','风雨依然滴滴落'],
['161.18','看着你的背影消逝无踪'],
['167.26','喊也喊不停'],
['170.15','叫也叫不醒'],
['173.78','谢谢欣赏'],
['182.64','谢谢欣赏']
];
aud.src = 'http://wx.ttt.dj/data/nfs/mp3/3guai.mp3';
aud.loop = true;
aud.autoplay = true;
aud.addEventListener('timeupdate', () => {
change();
for(j=0; j<lrcAr.length; j++){
if(aud.currentTime >= lrcAr) lrcbox.innerHTML = lrcAr;
}
});
canv.onclick = () => aud.paused ? aud.play() : aud.pause();
function Line(x1,y1,x2,y2) {
this.x1 = x1;
this.y1 = y1;
this.x2 = x2;
this.y2 = y2;
lines.push(this);
}
Line.prototype.draw = function() {
ctx.beginPath();
ctx.strokeStyle = this.color;
ctx.lineWidth = lineWidth;
ctx.moveTo(this.x1, this.y1);
ctx.lineTo(this.x2,this.y2);
ctx.stroke();
}
for(let j = 0; j < total; j ++) {
let line = new Line();
line.x1 = j * lineWidth + j*2 + lineWidth / 2 + 1;
line.y1 = h;
line.x2 = line.x1;
line.y2 = 60;
line.color = 'purple';
line.draw();
}
function change() {
ctx.clearRect(0,0,w,h);
for(let item of lines) {
item.color = '#' + Math.random().toString(16).substr(-6);
item.y2 = h - (Math.random() * h);
item.draw();
}
}
change();
</script>
<br><br><br><br><br><br><br><br><br><br> @风中飞尘
小风是你喜欢这首歌的啊{:4_170:} 我用你的无损音乐链接做的，音质棒棒的{:4_208:} @马黑黑
谢谢黑黑的教程分享，学习套用一个 这背景图真美，赏心悦目呢{:4_187:} 歌儿也挺好听的{:4_187:} 千羽 发表于 2022-8-24 21:51
这背景图真美，赏心悦目呢
千羽这个图图网络上的加了个人物和破船{:4_170:} 千羽 发表于 2022-8-24 21:52
歌儿也挺好听的
高音质无损音乐，是小风的音乐我用的 小辣椒 发表于 2022-8-24 21:54
千羽这个图图网络上的加了个人物和破船
小辣椒会选材，挺好的{:4_181:} 这个频谱够长的，厉害厉害 哎呀 爱死你了 。非常感谢。。。真的用心了 小辣椒{:4_366:}{:4_366:} 厉害厉害。 马黑黑 发表于 2022-8-24 21:56
这个频谱够长的，厉害厉害
这个图图大一点我就加长了频谱{:4_173:} 风中飞尘 发表于 2022-8-24 22:00
哎呀 爱死你了 。非常感谢。。。真的用心了 小辣椒
你的音乐，我送你{:4_170:} 小辣椒 发表于 2022-8-24 22:04
这个图图大一点我就加长了频谱
粗了一点。可以考虑加大总数 加林森 发表于 2022-8-24 22:02
厉害厉害。
队长晚上好，这个不厉害呢 千羽 发表于 2022-8-24 21:56
小辣椒会选材，挺好的
谢谢千羽表扬{:4_189:} 风中飞尘 发表于 2022-8-24 22:00
哎呀 爱死你了 。非常感谢。。。真的用心了 小辣椒
这个音乐现在听听感觉很男人味的{:4_170:} 小辣椒 发表于 2022-8-24 22:10
谢谢千羽表扬
实话实说哈{:4_173:}
页:
[1]
2