匆匆那年 歌手：王菲 帖赠：红影
<style>#papa { margin: 150px 0 0 calc(50% - 780px); transform: translateX(0%); width: 1390px; height: 743px; background: tan url('https://wj.zp68.com/lxx/yunhua/2023/08/06/77.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; top:0px; display: grid; place-items: center; overflow: hidden; user-select: none; z-index: 1;}
#papa::before { position: absolute; content: ''; border-radius: inherit; width: 0%; height: 0%; transition: all 2s linear; }
#papa::before { background: tan url('') no-repeat center/cover;transform: rotateY(0deg); }
#papa:hover::before { transform: translate(0%,0%) rotateY(0deg)scale(3);opacity: 0; }
#lrc { --motion: cover2; --tt: 1s; position: absolute; left: 50%;top:62%; transform: translate(-50%, 10px);font:normal 2.8em 华文隶书; color:#0000;filter:hue-rotate(0deg)contrast(120%)brightness(200%);filter: drop-shadow( 2px 2px 0px #000000); z-index: 2; }
#lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: pre;background:#ff0000 ; filter: drop-shadow( 0px 0px 1px #ffffff)drop-shadow( 0px 0px 1px #ffffff)drop-shadow( 0px 0px 1px #ffffff)drop-shadow( 0px 0px 1px #ffffff); -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
#mplayer { position: absolute; font: normal 2.6em/0em serif;color:#acaeaf;left:61%;top:89%;cursor: pointer;z-index:880;animation: spin 10s infinite linear;}
@keyframes spin {0% { transform: rotate(360deg); }}
#dt{position: absolute;width: 100%; height: 100%;top:0%; left:0%;mix-blend-mode: lighten;z-index: 2;}
@keyframes cover1{0% { width: 100%;transform: rotateY(-100deg)rotatex(100deg);filter: hue-rotate(180deg)brightness(850%)}
20% { transform:rotateY(0deg) rotatex(0deg);filter: hue-rotate(360deg)brightness(350%) }
100% { transform: rotateY(0deg)rotatex(0deg);filter: hue-rotate(0deg)brightness(950%);width: 100%;}
}
@keyframes cover2 { 0% { width: 100%;transform: rotateY(-100deg)rotatex(100deg);filter: hue-rotate(180deg)brightness(850%)}
20% { transform:rotateY(0deg) rotatex(0deg);filter: hue-rotate(360deg)brightness(350%) }
100% { transform: rotateY(0deg)rotatex(0deg);filter: hue-rotate(0deg)brightness(950%);width: 100%;}
}
#papa:hover #fullscreen { display:block ;}
#fullscreen { position: absolute; top:5%; left:80%;color:#FFffff; filter:drop-shadow( 1px 1px 1px #000000);font: normal 3em华文隶书; opacity: 1; cursor: pointer; z-index: 111}
</style>
<div id="papa">
<span id="fullscreen"></span>
<div id="mydiv"></div>
<div id="lrc" data-lrc="HCPlayer">HCPlayer</div>
<div id="dt"><img id="testImg"src="https://wj.zp68.com/lxx/yunhua/2023/08/06/77.gif" width=1390px; height=height: 743px;>
<div id="mplayer">✺</div>
</div>
<audio id="aud" src="https://wj.zp68.com/lxx/yunhua/2023/08/06/clip.mp3" autoplay loop></audio>
<script>
(function() {
let mKey = 0, mFlag = true;
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;};
let averAdd = 0, offset = 0;
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 geci = `匆匆那年
歌手：王菲 (Faye Wong)
词：林夕
曲：梁翘柏
匆匆那年
我们究竟说了几遍再见
之后再拖延
可惜谁有没有爱过
不是一场七情上面的雄辩
匆匆那年
我们一时匆忙撂下
难以承受的诺言
只有等别人兑现
不怪那吻痕
还没积累成茧
拥抱着冬眠
也没能羽化再成仙
不怪这一段情
没空反复再排练
是岁月宽容
恩赐反悔的时间、、
如果再见不能红着眼
是否还能红着脸
就像那年匆促
刻下永远一起
那样美丽的谣言
如果过去还值得眷恋
别太快冰释前嫌
谁甘心就这样
彼此无挂也无牵
我们要互相亏欠
要不然凭何怀念
LRC编辑：小辣椒
匆匆那年
我们见过太少世面
只爱看同一张脸
那么莫名其妙
那么讨人欢喜
闹起来又太讨厌
相爱那年活该匆匆
因为我们不懂
顽固的诺言
只是分手的前言
不怪那天太冷
泪滴水成冰
春风也一样
没吹进凝固的照片
不怪每一个人
没能完整爱一遍
是岁月善意
落下残缺的悬念。。
如果再见不能红着眼
是否还能红着脸
就像那年匆促
刻下永远一起
那样美丽的谣言
如果过去还值得眷恋
别太快冰释前嫌
谁甘心就这样
彼此无挂也无牵
如果再见不能红着眼
是否还能红着脸
就像那年匆促
刻下永远一起
那样美丽的谣言
如果过去还值得眷恋
别太快冰释前嫌
谁甘心就这样
彼此无挂也无牵
我们要互相亏欠
我们要藕断丝连
谢谢欣赏！
`;
let lrcAr = getLrcAr(geci);
let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrcAr;lrc.dataset.lrc = lrcAr.replace(/<br>/, '\n');lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');papa.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};
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 = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('pause', () => mState());
aud.addEventListener('play', () => mState());
aud.addEventListener('seeked', () => calcKey());
aud.addEventListener('timeupdate', () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime >= lrcAr) {if (mKey === j) showLrc(lrcAr);else continue;}}});
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
})();
mplayer.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>mplayer.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>mplayer.style.animationPlayState = 'paused');
</script>
<script>
if ('getContext' in document.createElement('canvas')) {
HTMLImageElement.prototype.play = function() {
if (this.storeCanvas) {
// 移除存储的canvas
this.storeCanvas.parentElement.removeChild(this.storeCanvas);
this.storeCanvas = null;
// 透明度还原
image.style.opacity = '';
}
if (this.storeUrl) {
this.src = this.storeUrl;
}
};
HTMLImageElement.prototype.stop = function() {
var canvas = document.createElement('canvas');
// 尺寸
var width = this.width, height = this.height;
if (width && height) {
// 存储之前的地址
if (!this.storeUrl) {
this.storeUrl = this.src;
}
// canvas大小
canvas.width = width;
canvas.height = height;
// 绘制图片帧（第一帧）
canvas.getContext('2d').drawImage(this, 0, 0, width, height);
// 重置当前图片
try {
this.src = canvas.toDataURL("image/gif");
} catch(e) {
// 跨域
this.removeAttribute('src');
// 载入canvas元素
canvas.style.position = 'absolute';
// 前面插入图片
this.parentElement.insertBefore(canvas, this);
// 隐藏原图
this.style.opacity = '0';
// 存储canvas
this.storeCanvas = canvas;
}
}
};
}
var image = document.getElementById("testImg"),
button = document.getElementById("mplayer");
if (image&& button) {
button.onclick = function() {
if (this.value == '') {
image.play();
this.value = '.';
} else {
image.stop();
this.value = '';
}
};
}
</script>
<style>
#mydiv {
margin: 10px auto;
width: 100%;
height: 100%;
overflow: hidden;
cursor: pointer;
position: relative;
--state: paused;}
.dot {z-index: 2;
position: absolute;
left: 40%;
top:60%;
width:250px;opacity:0;
height:260px;
background: url(' ')no-repeat center/cover;
}
@keyframes ani { to { transform: rotate(var(--deg)) translateY(-620px); filter:hue-rotate(360deg);opacity:1;}}
</style>
<script>
Array.from({length: 100}).forEach( (item,key) => {
let sp = document.createElement('span');
let ww = Math.random() * 5 + 2;
sp.className = 'dot';
sp.style.cssText += `
--deg: ${-100 + Math.random() * 200}deg;
animation: ani 10s ${Math.random() * key - 2}s infinite alternate var(--state);
`;
mydiv.appendChild(sp);
});
let mState = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
</script>
@红影
亲爱的~~你最辛苦了，每天很劳累，每个帖都认真的回复，论坛有你是幸运的！
花潮有你最精彩！ 点击转盘中心位置，一键停止动图 也是谢谢亚伦，小辣椒瞎捣鼓成功~{:4_170:} 谢谢亲爱的，看到艾特提醒，赶快飞奔而来{:4_185:} 这么华丽的动态效果，歌词同步也很特别。的确点击圆盘中心可以让所有动态停止。这个帖子太棒了，亲爱的厉害{:4_199:} 仔细听完，这首歌还挺怀念的感觉。谢谢亲爱的好帖{:4_187:} 红影 发表于 2023-8-6 21:19
谢谢亲爱的，看到艾特提醒，赶快飞奔而来
亲爱的~~一个慰问帖，送给为论坛辛勤付出最多的你{:4_179:} 好炫酷的频谱幕布墙！顶天立地跟座飞天的桥一般~~ 红影 发表于 2023-8-6 21:22
这么华丽的动态效果，歌词同步也很特别。的确点击圆盘中心可以让所有动态停止。这个帖子太棒了，亲爱的厉害 ...
这个帖昨天晚上捣鼓好的，今天白天没有时间，晚上上来上传了，是个以前的频谱播放器效果 红影 发表于 2023-8-6 21:27
仔细听完，这首歌还挺怀念的感觉。谢谢亲爱的好帖
我是按这个图图的标题做的音乐，旧图图现成用了{:4_189:} 这个仿真播放器也太真实了，光盘模拟，高低频，还带歌词~~ 第一次看到这个播放器和频谱，震撼！代码技术一流，贴子效果一流。。。 欣赏小辣椒美贴！！大饱眼福。。。{:4_187:} 花飞飞 发表于 2023-8-6 21:38
好炫酷的频谱幕布墙！顶天立地跟座飞天的桥一般~~
飞飞，这个是以前玩swf时的频谱播放器 花飞飞 发表于 2023-8-6 21:39
这个仿真播放器也太真实了，光盘模拟，高低频，还带歌词~~
飞飞我也是一直在想怎么一键停止动图和音乐，看见亚伦发的帖我就去按他的代码自己捣鼓了一个出来{:4_173:} 花飞飞 发表于 2023-8-6 21:40
第一次看到这个播放器和频谱，震撼！代码技术一流，贴子效果一流。。。
昨天晚上家里就我一个人，必须完成的，昨天晚上捣鼓成功了，今天我得早下了。。。。
飞飞晚安~ 小辣椒 发表于 2023-8-6 21:41
飞飞，这个是以前玩swf时的频谱播放器
超酷的，还有倒影！看着好好看啊。。。{:4_170:} 花飞飞 发表于 2023-8-6 21:44
超酷的，还有倒影！看着好好看啊。。。
这个频谱以前老玩的效果，现在拿出来晒晒 小辣椒 发表于 2023-8-6 21:43
飞飞我也是一直在想怎么一键停止动图和音乐，看见亚伦发的帖我就去按他的代码自己捣鼓了一个出来{:4_173: ...
{:4_199:}超级厉害的，你也太快了。。。