谁把谁错过(对唱版)-彭大耳&田娥
本帖最后由 亚伦影音工作室 于 2023-8-28 14:13 编辑 <br /><br /><style>#papa { margin: 20px -300px; width: 1164px; height: 620px; background: gray url('https://pic.imgdb.cn/item/64ec36d3661c6c8e54c4dcd6.jpg') center/cover no-repeat; box-shadow:0 0px 0px 2px #80ff00; position: relative; z-index: 1; --state: running; overflow:hidden;}
#img_border{width:100%;height:100%;position: absolute;animation: rotating 10s linear infinite;z-index: 2;background: url('https://pic.imgdb.cn/item/64ec36d3661c6c8e54c4dcd6.jpg') no-repeat center/cover;}
@keyframes rotating{
0% {opacity: 1;transform: scale(1);}
50% {opacity: 1;transform: scale(1);filter:hue-rotate(360deg)contrast(120%)brightness(120%);}
51% {opacity: 1;transform: scale(1);}
100% {opacity: 0;transform:scale(4)rotateY(0deg);}
}
#lrc { --motion: cover2; --tt: 1s; position: absolute; left: 50%;top:82%; transform: translate(-50%, 10px);font:normal 3em 华文新魏; color:#0000;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; width: 420px; height: 150px;left: 65%; z-index: 120;top:60%;mix-blend-mode:exclusion; transform:perspective(750px) rotateY(60deg)rotateX(50deg)scale(1.3); }
#an{position: absolute;
top:0%; left:0%;
width: 100%;
height:100%; z-index: 120;
}
@keyframes cover1{ 0% { width: 100%;transform: rotateY(-180deg)rotatex(0deg);filter: hue-rotate(180deg)brightness(850%)drop-shadow(0 0 10px #fff000)}
20% { transform:rotateY(0deg) rotatex(0deg);filter: hue-rotate(360deg)brightness(350%)drop-shadow(0 0 8px #000080) }
100% { transform: rotateY(0deg)rotatex(0deg);filter: hue-rotate(0deg)brightness(950%)drop-shadow(0 0 16px #ffffff);width: 100%;}
}
@keyframes cover2 { 0% { width: 100%;transform: rotateY(-180deg)rotatex(0deg);filter: hue-rotate(180deg)brightness(850%)drop-shadow(0 0 10px #fff000)}
20% { transform:rotateY(0deg) rotatex(0deg);filter: hue-rotate(360deg)brightness(350%)drop-shadow(0 0 8px #000080) }
100% { transform: rotateY(0deg)rotatex(0deg);filter: hue-rotate(0deg)brightness(950%)drop-shadow(0 0 16px #ffffff);width: 100%;}
}
#fullscreen { position: absolute; top:5%; left:83%;color:#ffffff; filter:drop-shadow( 1px 1px 1px #000000);font: normal 2.2em华文新魏; opacity: 1; cursor: pointer; z-index: 1660}
</style>
<div id="papa">
<span id="fullscreen">全屏观赏</span>
<div id="mydiv"></div>
<divid="img_border" ></div>
<div id="lrc" data-lrc="谁把谁错过(对唱版)-彭大耳&田娥">谁把谁错过(对唱版)-彭大耳&田娥</div>
<div id="mplayer">
<img id="an"src="https://pic.imgdb.cn/item/645136810d2dde5777595e6d.gif" width="100%" height="100%"></div>
</div>
<audio id="aud" src="https://www.qqmc.com/mp3/music294696249.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 = `谁把谁错过(对唱版)-彭大耳&田娥
词：三力
曲：云淡
编曲：大约冬季
混音：冯鑫阳
监制：谢飞
厂牌：三力音乐
OP：亚伦影音工作室
女：
感情本就没输赢
只要分手都伤人
男：
谁是谁非如烟云
情场哪里有公平
女：
爱情没有对与错
谁又曾想会错过
男：
人海相遇种下因
曲终人散无结果
合：
错错错呀错错错
男：
到底谁把谁错过
女：
都是缘分惹的祸
女：
不要再说难割舍
合：
错错错呀错错错
男:
谁又想把谁错过
女：
有缘无分没结果
女：
伤的是你痛的还是我
男：
感情本就没输赢
只要分手都伤人
女：
谁是谁非如烟云
情场哪里有公平
男：
爱情没有对与错
谁又曾想会错过
女：
人海相遇种下因
曲终人散无结果
合：
错错错呀错错错
男：
到底谁把谁错过
女：
都是缘分惹的祸
女：
不要再说难割舍
合：
错错错呀错错错
男：
谁又想把谁错过
女：
有缘无分没结果
女：
伤的是你痛的还是我
合：
错错错呀错错错
男：
到底谁把谁错过
女：
都是缘分惹的祸
女：
不要再说难割舍
合：
错错错呀错错错
男：
谁又想把谁错过
合：
有缘无分没结果
合：
伤的是你痛的还是我`;
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());
})();
img_border.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>img_border.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>img_border.style.animationPlayState = 'paused');
let fs = true;
fullscreen.onclick = () => {
fs ? (fullscreen.innerText = '退出全屏',papa.requestFullscreen()) : (fullscreen.innerText = '全屏观赏', document.exitFullscreen());
fs = !fs;
};
</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("an"),
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: 0px auto;
width: 100%;
height: 100%;
z-index: 3;
overflow: hidden;
cursor: pointer;
position: absolute;
--state: paused;
}
.dot {
position: absolute;
left: 40%;
bottom: -10px;z-index: 3;
width:200PX;opacity:0;
height:210PX;
border-radius: 0%;
background: url('https://pic.imgdb.cn/item/643c03fe0d2dde5777107ce2.png')0 0/100% 100%;
}
@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_199:}
页:
[1]