走在冷雨里-艺凌
<style>#pa {
margin: 140px -230px;
width: 1286px ;
height: 700px;
border: 1px solid gray;
display: grid;overflow: hidden;
place-items: center;background: url(https://pic1.imgdb.cn/item/692e211611af9ce9c3e936f1.png) no-repeat center/cover;
position: relative;
}
#background{
width: 100%; height: 100%;
background: url("https://xlaj.cn/upfile/202412/10/119.jpg")no-repeat;
position: absolute;
top: 0px;
left: 0px;
animation: c 12s linear infinite;
background-size: cover;
}
@keyframes c {
from{transform: scale(1);
}
50%{transform: scale(1.3);
}
to{transform: scale(1.3);
}
}
#canv { position: absolute; width: 100%; height: 100%;opacity: 0.5; }
#player {position:absolute;top: 20%;z-index: 99;
left: 70%;
width: 250px;
height: 250px;
display: grid;
place-items: center;
animation: rot 8s linear infinite ;
}
@keyframes rot {to { transform: rotate(360deg);filter: hue-rotate(360deg); }}
#rect {position: absolute;
width: 30%;
height: 30%;
display: grid;
place-items: center;
clip-path: polygon(60% 0, 100% 0, 50% 50%, 40% 100%, 0 100%, 50% 50%);
}
#rect:nth-of-type(1) { background:#06ff52;transform: rotate(0deg);
}
#rect:nth-of-type(2) { background:#06ff52;transform: rotate(45deg);
}
#rect:nth-of-type(3) { background:#06ff52;transform: rotate(90deg);
}
#rect:nth-of-type(4) { background:#06ff52;transform: rotate(135deg);
}
#wrapper {z-index: 9;
position: absolute;
padding: 10px;
;font:normal 2.8em 华文隶书;
filter: drop-shadow(#000 1px 1px 1px) ;
bottom: 120px;
}
.char {
display: inline-block;
padding: 0 2px;
opacity: 0;
transform: translate(var(--x), var(--y));
animation: fadeIn 1.5s var(--delay) forwards, flash 0.5s infinite alternate;
}
audio { position: absolute; left: 160px; top: 20px; }
@keyframes fadeIn {
to {
transform: translate(0, 0);
opacity: 1;
}
}
@keyframes flash {
to { filter: hue-rotate(360deg); }
}
</style>
<div id="pa">
<audio id="aud" src="https://aod.cos.tx.xmcdn.com/storages/d557-audiofreehighqps/33/44/GKwRIJIK7YAXACAAAAMjB32n.m4a" loop autoplay></audio>
<div class="wall" id="background"></div>
<canvas id="canv"></canvas>
<div id="player">
<spanid="rect"></span>
<spanid="rect"></span>
<spanid="rect"></span>
<spanid="rect"></span>
</div>
<div id="wrapper">走在冷雨里-艺凌</div>
</div>
<script>
const gc = `走在冷雨里-艺凌
帖赠亚纶 祝早日康复
词曲：隔壁老陈
编曲：李胜华
走在冷雨里
苦苦找寻往日的甜蜜
冷风一阵阵
吹不散我心中的忧虑
为什么你要狠心地离去
我不明白错在了哪里
如果我伤了你
不是我故意
我真的爱你不想放弃
只想和你在一起
求求你不要不要再生气
快快回到我的怀抱里
LRC编辑：小辣椒
走在冷雨里
苦苦找寻往日的甜蜜
凄风一阵阵
吹不散我心中的忧虑
为什么你要把我来抛弃
你给我太多太多的回忆
如果我伤了你
不是我故意
我真的爱你真的想你
只盼情缘能再续
求求你不要不要再怀疑
我的生命里不能没有你
LRC编辑：小辣椒
为什么你要把我来抛弃
你给我太多太多的回忆
如果我伤了你
不是我故意
我真的爱你真的想你
只盼情缘能再续
求求你不要不要再怀疑
我的生命里不能没有你
谢谢欣赏
`;
const gcAr = lrc2HC(gc);
let curkey = 0, isSeeking = false;
aud.ontimeupdate = () => {
if(curkey > gcAr.length - 1) return;
if(aud.currentTime >= gcAr) {
const gap = gcAr?. ?? 0 - gcAr;
showLrc(gcAr, wrapper, gap);
}
};
aud.onended = () => {
curkey = 0;
aud.play();
}
aud.onseeked = () => calcKey();
function lrc2HC(text) {
let lrcAr = [];
let ar = text.trim().split('\n');
ar.sort();
let reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
ar.forEach(item => {
if(reg.test(item)) {
let result = item.match(reg);
let tmsg = parseInt(result) * 60 + parseInt(result) + parseInt(result) / 1000;
lrcAr.push(.trim()]);
}
});
return lrcAr ? lrcAr : ;
};
function calcKey() {
for (let j = 0; j < gcAr.length; j++) {
if (aud.currentTime <= gcAr) {
curkey = j - 1;
break;
}
}
if (curkey < 0) curkey = 0;
if (curkey > gcAr.length - 1) curkey = gcAr.length - 1;
let time = gcAr?. ?? 0 - gcAr;
isSeeking = false;
showLrc(gcAr, wrapper, time);
}
function showLrc(str, targetElm, time) {
if(isSeeking) return;
targetElm.innerHTML = '';
const chars = str.split('').map(c => c === ' ' ? ' ' : c);
const frg = document.createDocumentFragment();
chars.forEach((char, idx) => {
const span = document.createElement('span');
span.innerHTML = char;
span.classList.add('char');
const x = Math.random() * (Math.random() > 0.5 ? 300 : -300);
const y = Math.random() * (Math.random() > 0.5 ? 300 : -300);
span.style.cssText += `
color: #${Math.random().toString(16).substring(2,8)};
--x: ${x}px;
--y: ${y}px;
--delay: ${Math.random() * 0.5}s;
`;
frg.appendChild(span);
});
targetElm.appendChild(frg);
curkey ++;
setTimeout(() =>isSeeking = false, time);
}
</script>
<script>
(function main() {
let canv = document.getElementById('canv');
let ctx = canv.getContext('2d');
canv.width = canv.clientWidth;
canv.height = canv.clientHeight;
let dropList = [], linelist = [], mousePos = ;
let gravity = 0.5, mouseDis = 35, lineNum = 20, speedx = 0, maxspeedx = 0;
window.onmousemove = function (e) {
mousePos = e.clientX - offset(papa).x;
mousePos = e.clientY - offset(papa).y;
maxspeedx = (e.clientX - canv.clientWidth / 2) / (canv.clientWidth / 2);
}
function createLine(e) {
let temp = 0.25 * (50 + Math.random() * 100);
let line = {
speed: 5.5 * (Math.random() * 6 + 3),
die: false,
posx: e,
posy: -50,
h: temp,
corlor: '#eee'
};
linelist.push(line);
}
function createDrop(x, y) {
let drop = {
die: false,
posx: x,
posy: y,
vx: (Math.random() - 0.5) * 8,
vy: Math.random() * (-6) - 3,
radius: Math.random() * 1.5 + 1
};
return drop;
}
function madedrops(x, y) {
let maxi = Math.floor(Math.random() * 5 + 5);
for (let i = 0; i < maxi; i++) {
dropList.push(createDrop(x, y));
}
}
window.requestAnimationFrame(update);
function update() {
if (dropList.length > 0) {
dropList.forEach(function (e) {
e.vx = e.vx + (speedx / 2);
e.posx = e.posx + e.vx;
e.vy = e.vy + gravity;
e.posy = e.posy + e.vy;
if (e.posy > canv.clientHeight) {
e.die = true;
}
});
}
for (let j = dropList.length - 1; j >= 0; j--) {
if (dropList.die) {
dropList.splice(j, 1);
}
}
speedx = speedx + (maxspeedx - speedx) / 50;
for (let i = 0; i < lineNum; i++) {
createLine(Math.random() * 2 * canv.width - (0.5 * canv.width));
}
let endLine = canv.clientHeight - Math.random() * canv.clientHeight / 5;
linelist.forEach(function (e) {
let dis = Math.sqrt(((e.posx + speedx * e.h) - mousePos) * ((e.posx + speedx * e.h) - mousePos) + (e.posy + e.h - mousePos) * (e.posy + e.h - mousePos));
if (dis < mouseDis) {
e.die = true;
madedrops(e.posx + speedx * e.h, e.posy + e.h);
}
if ((e.posy + e.h) > endLine) {
e.die = true;
madedrops(e.posx + speedx * e.h, e.posy + e.h);
}
if (e.posy >= canv.clientHeight) {
e.die = true;
} else {
e.posy = e.posy + e.speed;
e.posx = e.posx + e.speed * speedx;
}
});
for (let j = linelist.length - 1; j >= 0; j--) {
if (linelist.die) {
linelist.splice(j, 1);
}
}
render();
window.requestAnimationFrame(update);
}
function render() {if(!aud.paused){
ctx.fillRect(0, 0, canv.width, canv.height);
ctx.lineWidth = 1;
linelist.forEach(function (line) {
ctx.strokeStyle = line.color;
ctx.beginPath();
ctx.moveTo(line.posx, line.posy);
ctx.lineTo(line.posx + line.h * speedx, line.posy + line.h);
ctx.stroke();
});
ctx.lineWidth = 0.5;
ctx.strokeStyle = "#fff";
dropList.forEach(function (e) {
ctx.beginPath();
ctx.arc(e.posx, e.posy, e.radius, Math.random() * Math.PI * 2, 1 * Math.PI);
ctx.stroke();
});
}
}
function offset(e) {
let x = e.offsetLeft, y = e.offsetTop, pa = e.offsetParent;
while(pa != null) {
x += pa.offsetLeft;
y += pa.offsetTop;
pa = pa.offsetParent;
}
return {x, y};
}
})();</script>
<script>
player.onclick = () => aud.paused ? (aud.play(),player.style.animationPlayState = 'running',background.style.animationPlayState = 'running') :( aud.pause(),player.style.animationPlayState = 'paused',background.style.animationPlayState = 'paused');
</script> 套用亚纶的代码玩一次 小辣椒 发表于 2025-12-24 20:29
套用亚纶的代码玩一次
{:5_150:}{:5_150:}{:5_150:} 这个播放器不是png的{:5_150:} 雨不小的，有点大，又是冷雨，会感冒的
{:5_128:}{:5_128:}
页:
[1]