秋风知我意
<meta charset="UTF-8"><style>
#papa {position: relative; margin: 0px -260px; width: 1286px; height: 740px;box-shadow:0 0px 0px 0px #800000;overflow:hidden;
background: #000 url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/live/cd091e351eac4bd0d80607543aba0b4b.jpg)center/cover no-repeat; --state: running;z-index: 1; }
#vid{width: 100%; height: 100%;z-index: 1;
position:absolute;
top:0%; left:0%;
object-fit: cover; pointer-events: none;
}
#player {position:absolute;top: 4%;z-index: 98;
left: 85%;
width: 120px;
height: 120px;
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:#880000;transform: rotate(0deg);
}
#rect:nth-of-type(2) { background:#ff0000;transform: rotate(45deg);
}
#rect:nth-of-type(3) { background:#eee;transform: rotate(90deg);
}
#rect:nth-of-type(4) { background:#fff000;transform: rotate(135deg);
}
#lrc {position:absolute; --motion: cover2;--tt: 1s; left: 50%;top:82%;transform: translate(-50%);perspective: 200px;
font:normal 2.0em 华文行楷; color:#0000; z-index: 21; }
#lrc::before {position:absolute; content: attr(data-lrc); width: 100%; height: 100%; color: transparent; white-space: pre;background: linear-gradient(40deg, #1E9600 0%,#FFF200 50%,#FF0000 100%); filter: drop-shadow( 0px 0px 1px #000000)drop-shadow( 0px 0px 1px #000000); -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
@keyframes cover1 {
0% {transform: rotate3d(0, 1, 0, 0deg);}
50% {transform: rotate3d(0, 1, 0, -360deg);}
100% {transform: rotate3d(0, 1, 0, -360deg);}
}
@keyframes cover2 {0% {transform: rotate3d(0, 1, 0, 0deg);}
50% {transform: rotate3d(0, 1, 0, -360deg);}
100% {transform: rotate3d(0, 1, 0, -360deg);}
}
</style>
<div id="papa">
<video id="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/71c5650cb38cf6392be5e57daa474f58_preview.mp4" loop muted autoplay=""></video>
<div data-lrc="" id="lrc" title=""></div>
<div id="player">
<spanid="rect"></span>
<spanid="rect"></span>
<spanid="rect"></span>
<spanid="rect"></span>
</div>
<audio id="aud" src="https://www.joy127.com/url/159528.mp3" autoplay loop></audio>
</div>
<script >
(function() {
let lrcStr = `00:00.13]秋风知我意 (DJ九零版) - 草原兄弟
LRC编辑：醉美水芙蓉
一个人走在没你的城市里
路灯照亮孤独拉长了身影
街角处那对情侣 好像当初我和你
可惜我的身边 再也没有你
我把心酸回忆藏在秋风里
我把想念化作落叶飘向你
可眼泪像场大雨 只淋湿了我自己
可惜时间也没 能让我忘记
愿许秋风能知我意 将我思念邮寄
不想把遗憾 藏匿在心底
我等到枯叶落满地 也再没等到你
怎么狠心我 一个人孤寂
愿许秋风能知我意 吹散我的泪滴
凭什么只剩 我留在原地
如果思念是种罪行 那就判我无期
只求能再见 你温柔眼睛
我把心酸回忆藏在秋风里
我把想念化作落叶飘向你
可眼泪像场大雨 只淋湿了我自己
可惜时间也没 能让我忘记
愿许秋风能知我意 将我思念邮寄
不想把遗憾 藏匿在心底
我等到枯叶落满地 也再没等到你
怎么狠心我 一个人孤寂
愿许秋风能知我意 吹散我的泪滴
凭什么只剩 我留在原地
如果思念是种罪行 那就判我无期
只求能再见 你温柔眼睛
愿许秋风能知我意 将我思念邮寄
不想把遗憾 藏匿在心底
我等到枯叶落满地 也再没等到你
怎么狠心我 一个人孤寂
愿许秋风能知我意 吹散我的泪滴
凭什么只剩 我留在原地
如果思念是种罪行 那就判我无期
只求能再见 你温柔眼睛
谢谢欣赏！
`;
/* mKey - mFlag ùaverAdd */
let mKey = 0, mFlag = true, averAdd = 0.3;
/* */
let lrcTime = (ar) => {
let tmpAr = [];
for(j = 0; j <ar.length - 1; j ++) {
if(j !== ar.length - 1) tmpAr = parseFloat((ar - ar).toFixed(1));
}
let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1)) + averAdd;
tmpAr.push(aver);
tmpAr.forEach((item,key) => {
ar = item > aver ? aver : item;
});
return ar;
};
/* lrc n*3 */
let getLrcAr = (text) => {
let lrcAr = [];
let calcRule = ;
for(x of text.split('\n')) {
let ar = [];
let re = /\d+[\.:]\d+([\.:]\d+)?/g;
let geci = x.replace(re,'');
if(geci) {
geci = geci.replace(/[\[\]\'\"\t,]s?/g,'');
let time = x.match(re);
if(time != null) {
for(y of time) {
let tmp = y.match(/\d+/g);
let sec = 0;
for(z in tmp) sec += tmp * calcRule;
ar = ;
lrcAr.push(ar);
}
}
}
}
lrcAr.sort((a,b)=> a - b);
return(lrcTime(lrcAr));
};
/* */
let showLrc = (time) => {
let name = mFlag ? 'cover1' : 'cover2';
lrc.innerHTML = lrcAr;
lrc.dataset.lrc = lrcAr;
lrc.style.setProperty('--motion', name);
lrc.style.setProperty('--tt', time + 's');
lrc.style.setProperty('--state', 'running');
mKey += 1;
mFlag = !mFlag;
};
/*mKey*/
let calcKey = () => {
for (j = 0; j < lrcAr.length; j++) {
if (aud.currentTime <= lrcAr) {
mKey = j - 1;
break;
}
}
if (mKey < 0) mKey = 0;
if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
let time = lrcAr - (aud.currentTime - lrcAr);
showLrc(time);
};
/**/
let toMin = (val) => {
if (!val) return '00:00';
val = Math.floor(val);
let min = parseInt(val / 60),
sec = parseFloat(val % 60);
if (min < 10) min = '0' + min;
if (sec < 10) sec = '0' + sec;
return min + ':' + sec;
}
/* л*/
let mState = () => aud.paused ? (lrc.style.setProperty('--state','paused')) : (lrc.style.setProperty('--state','running'));
/**/
aud.addEventListener('timeupdate', () => {
for (j = 0; j < lrcAr.length; j++) {
if (aud.currentTime >= lrcAr) {
cKey = j;
if (mKey === j) showLrc(lrcAr);
else continue;
}
}
});
aud.addEventListener('pause', () => mState());/**/
aud.addEventListener('play', () => mState());/**/
aud.addEventListener('seeked', () => calcKey());/**/
let lrcAr = getLrcAr(lrcStr); /**/
})();
</script>
<script>
player.onclick = () => aud.paused ? (aud.play(),vid.play(),player.style.animationPlayState = 'running') : (aud.pause(),vid.pause(),player.style.animationPlayState = 'paused');
</script>
好听好看，谢谢友友精彩分享 klxf 发表于 2026-10-13 23:42
好听好看，谢谢友友精彩分享
谢谢友友支持！
页:
[1]