旧梦 (DJ默涵版) - 刘晓超
<style>
#papa {margin: 0px 0 0 calc(50% - 681px); width: 1164px;height:680px;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 6px #880000; overflow: hidden;place-items: center;background: #333 url('https://pic.imgdb.cn/item/64fc69aa661c6c8e54ff421c.jpg') no-repeat center/cover; position: relative;z-index: 12345;}
#tu{position: absolute;top:0%; left:0%;z-index: 2;
width: 100%;background:url('https://pic.imgdb.cn/item/64fc69aa661c6c8e54ff421c.jpg') no-repeat center/cover;
height: 100%;animation: round 4s linear infinite; }
@keyframes round{
0% {
-webkit-transform:rotate(0)scale(1)translate(0%,0%);filter:hue-rotate(360deg);
opacity:1}
100% {
-webkit-transform:rotate(0deg)scale(4)translate(0%,0%);filter:hue-rotate(0deg);
opacity:0}
}
#dt{position: absolute;top:60%; left:10%;width: 35%;height: 22%;z-index:2;}
#flyBox { --w: 112px; width: var(--w); overflow: hidden; color: #cccccc; position: absolute; left:23%;bottom: 35%; font: normal 0.5em华文新魏;z-index:5;}
#flyBox div { word-break: keep-all; white-space: nowrap; animation: fly 10s linear infinite; background:#0000}
@keyframes fly { from { transform: translateX(100%); } to { transform: translateX(calc(0% - var(--w))); }}
#lrc { --motion: cover2; --tt: 2s; position: absolute; left: 50%;top:82%;transform: translate(-50%); font:normal 3.2em 华文新魏; color:#0000;filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0); z-index: 5; place-items: center; overflow: hidden; }
#lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: pre;background:#ff0000;-webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; place-items: center;}
@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(150%) }
100% { transform: rotateY(0deg)rotatex(0deg);filter: hue-rotate(0deg)brightness(150%);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%;}
}
#mplayer { position: absolute; left: 21%;top:72%;cursor: pointer;z-index:888; width: 100%;mix-blend-mode: lighten; filter:invert(100%)}
filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);
#papa:hover #fullscreen { display:block ;}
#fullscreen { position: absolute; top:5%; left:80%;color:#FFffff; filter:drop-shadow( 1px 1px 1px #000000);font: normal 2.2em华文新魏; opacity: 1; cursor: pointer; z-index: 111}
</style>
<div id="papa">
<div id='tu'></div>
<div id='dt' ><img id="testImg" src="https://pic.imgdb.cn/item/64fc23e6661c6c8e54eee347.gif" width="100%" height="100%"></div>
<div id="flyBox"><div >旧梦 (DJ默涵版) - 刘晓超</div></div>
<span id="fullscreen">全屏观赏</span>
<div id="lrc" data-lrc="HCPlayer">HCPlayer</div>
<div id="bnt"><div id="mplayer"><audiostyle="width:12%;" id="aud" controls="controls" autoplay="autoplay" loop="loop" src= "https://www.qqmc.com/mp3/music217710574.mp3" type="audio/mpeg"></audio></div></div>
</div>
<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 = ` 旧梦 (DJ默涵版) - 刘晓超
词：梁帅
曲：梁帅
今夜风阵阵
今夜花纷纷
今夜雨濛濛
我不能忘记 往日的誓约
往日的蜜意柔情
今夜泪涟涟
今夜雾茫茫
今夜歌声声
我怎能抛却 对你的思念
默默在心中奔涌
风呀咦呀吹个不停
想你呀咦呀想不停
爱的承诺 一个又一个
早已默默地凋零
雨呀咦呀下个不停
想你呀咦呀想不停
爱的苦酒 一杯又一杯
像一场逝去地旧梦
今夜风阵阵
今夜花纷纷
今夜雨濛濛
我不能忘记 往日的誓约
往日的蜜意柔情
今夜泪涟涟
今夜雾茫茫
今夜歌声声
我怎能抛却 对你的思念
默默在心中奔涌
风呀咦呀吹个不停
想你呀咦呀想不停
爱的承诺 一个又一个
早已默默地凋零
雨呀咦呀下个不停
想你呀咦呀想不停
爱的苦酒 一杯又一杯
像一场逝去地旧梦
爱的苦酒 一杯又一杯
像一场逝去地旧梦
谢谢欣赏！
`;
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());
})();
</script>
<script>
let fs = true;
fullscreen.onclick = () => {
fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏观赏', document.exitFullscreen());
fs = !fs;
};
tu.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>tu.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>tu.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");
varbutton = document.getElementById("bnt");
let mState = () => aud.paused ? image.stop() : image.play();
bnt.onclick = () => {aud.paused ? aud.play() : aud.pause();}
aud.addEventListener('play', mState,false);
aud.addEventListener('pause', mState,false);
</script> 这个好看，老师好棒！:victory: 欣赏精彩音画！ 宇神无敌 发表于 2023-9-11 20:47
这个好看，老师好棒！
谢谢朋友鼓励！ 翁奕童苑 发表于 2023-9-11 20:50
欣赏精彩音画！
谢谢老师光临！ 这个作品漂亮！！！！ 这个作品漂亮！！！！ 快播 发表于 2023-9-12 20:28
这个作品漂亮！！！！
谢谢朋友光临！ 红尘过客 发表于 2023-9-16 08:58
这个作品漂亮！！！！
谢谢朋友光临！ 这个作品漂亮！！！！
页:
[1]
2