同做岁月她的空房间 TO：岁月五一节快乐！
<div style="width: 480px;height: 870px;box-shadow:0px 0px 1px 2px #045768, 0px 0px 0px 8px #99e5f5,0px 0px 5px 15px #045768;overflow:hidden;border-radius:1%;margin-top:50px;margin-LEFT: 110px;">
<style>
#papa {
margin: auto;
top: -100px;
left: 0px;
width: 480px;
height: 890px;
background: url('https://xlaj.cn/assets/file/zp/20230423022146.jpg') center/cover no-repeat;
box-shadow: 3px 3px 20px #000;
position: relative;
opacity: 1;
z-index: 1;
}
#papa:hover
#mplayer { transition: .7s; opacity: .9; }
#vid {
display: none;
top: -100px;
left: 0px;
width:480px;
height: 690px;
}
#canv {
position: absolute;
display: block;
opacity: 1;
animation: opa 20s infinite alternate linear;
}
#mplayer {
position: absolute;
left: calc(50% - 15px);
bottom: 5px;
width: 30px;
height: 30px;
border: 2px solid white;
border-radius: 50%;
opacity: 0;
transition: .7s;
display: grid;
place-items: center;
--disp1: 0; --disp2: 1;
}
#mplayer::before,
#mplayer::after {
position: absolute;
content: '';
border-style: solid;
border-color: white;
cursor: pointer;
transition: .4s;
}
#mplayer::before {
width: 0;
height: 0;
left: 10px;
border-width: 10px 12px;
border-color: transparent transparent transparent white;
opacity: var(--disp1);
}
#mplayer::after {
width: 2px;
height: 20px;
border-width: 0 4px 0 4px;
opacity: var(--disp2);
}
@keyframes opa { to {opacity: 0;} }
</style>
<style type="text/css">
@keyframes mv { from { background-position: 1200px 0; } to { background-position: 0 0; } }
body { overflow-x: hidden; }
#baiBox {
margin: auto;
width: 800px;
text-align: center;
font-family:微软简中圆;
font-size: 2.5rem;
font-weight: bold;
color: #f46ff6;
transform-origin: top;
animation: yao 1.0s linear infinite alternate;
}
@keyframes yao {
from{transform: perspective(800px) rotatex(30deg); }
to { transform: perspective(800px) rotatex(-30deg); }
}
.tit { position: relative;width: 300px;height: 30px;top:20px;LEFT: -200px;z-index: 100;filter: drop-shadow(-1px 1px 1px #ffffff)drop-shadow(0px -1px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff) }
#tit:hover { color: green; }
</style>
<div id="hu" >
<div id="baiBox"
<div class="tit">
<span style="color:#076012;"><span style="font-size:45px;">她的空房间 </span>
<span style="color:#3d46f7;"><span style="font-size:20px;"> </span></div>
<div style="position: relative;width: 500px;height: 50px;top:510px;LEFT: 240px;z-index: 100;filter: drop-shadow(-1px 1px 1px #ffffff)drop-shadow(0px -1px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px ffffff)drop-shadow(0px 0px 1px #ffffff)">
<p><span style="color:#ffffff;"><span style="font-family:华文隶书;"></span></span></p></div>
</div>
</style>
<div id="papa">
<canvas id="canv"></canvas>
<div id="mplayer"></div>
<div id="fg"></div>
<div data-lrc="她的空房间 " id="lrc">她的空房间 </div>
</div>
</div>
<audio id="aud" src="https://xlaj.cn/assets/file/zp/20230423022318.mp3" loop autoplay></audio>
<video id="vid"src="https://lk999.oss-cn-guangzhou.aliyuncs.com/tdfj.mp4" autoplay muted loop="" controls="" style="MARGIN-TOP:0px;MARGIN-LEFT:0px;background:#000 ;width:480px; height: 890px;-webkit-mask-image: radial-gradient(black 100%, transparent 100%);position:absolute;left:0px;top:0px;"></video>
<style type="text/css">
#lrc {
--state: paused;
--motion: cover2;
--tt: 2s;
--bg: linear-gradient(180deg, #045768, #fc4302, #feef03);
position: absolute;z-index: 4;
left: 51%;
transform: translate(-50%);
top: 85%;
font:normal 2.4em 隶书;
color: #055306;
white-space: pre;
-webkit-background-clip: text;
filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);
}
#lrc::before {
position: absolute;
content: attr(data-lrc);
width: 20%;
height: 100%;
color: transparent;
overflow: hidden;
white-space: pre;
background: var(--bg);
-webkit-background-clip: text;
animation: var(--motion) var(--tt) linear forwards;
animation-play-state: var(--state);
}
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
</style>
<script >
(function() {
/*原始lrc歌词*/
let lrcStr = `
难过的时候我学会。。
想你的时候你是否。。
她的空房间
歌手： 胡杨林
帖赠：走过岁月
在一起难过 分开又不舍
那中间又应该是什么
难道这一切的错都是我
爱你没有说
你牵她的手 我也会难过
但我没有嫉妒的理由
为何守在你身边的人
永远不是我
你记得也好
也只好忘掉我爱你比她早
从没想过要你在我面前
勉强的微笑
我看你走进她的房间
脸上挂着从没有过的甜
门外的温度已成冰点
我只愿相信
你们一直也都无眠
我看你走进她的房间
还是不能离开这伤心画面
沉默让距离那么遥远
就让一切结束
在你关上门的一瞬间
你牵她的手 我也会难过
但我没有嫉妒的理由
为何守在你身边的人
永远不是我
你记得也好
也只好忘掉我爱你比她早
从没想过要你在我面前
勉强的微笑
我看你走进她的房间
脸上挂着从没有过的甜
门外的温度已成冰点
我只愿相信
你们一直也都无眠
我看你走进她的房间
还是不能离开这伤心画面
沉默让距离那么遥远
就让一切结束
在你关上门的一瞬间
就让一切结束
在你关上门的一瞬间
。。。。。。
`;
/*变量 ：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'),mplayer.style.animationPlayState = 'paused') : (lrc.style.setProperty('--state','running'),mplayer.style.animationPlayState = '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>
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("testBtn");
if (image && button) {
button.onclick = function() {
if (this.value == '') {
image.play();
this.value = '.';
} else {
image.stop();
this.value = '';
}
};
}
</script>
<script>
(function(){
let ctx = canv.getContext('2d');
let ww = canv.width = papa.offsetWidth, hh = canv.height = papa.offsetHeight;
let loop = () => {ctx.drawImage(vid, 0, -4, ww, hh, 0, -10, ww + 10, hh + 110);if(!vid.paused) {requestAnimationFrame(loop);return;}};
let mState = () => aud.paused ? (mplayer.style.setProperty('--disp1','1'), mplayer.style.setProperty('--disp2','0'), vid.pause()) : (mplayer.style.setProperty('--disp1','0'), mplayer.style.setProperty('--disp2','1'), vid.play());
vid.addEventListener('play', loop, false);
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
})();
</script>
<br><br><br><br>
@走过岁月
谢谢岁月的精彩礼物，这个小辣椒早就做好的，感觉礼物不够好，想重新做，你知道的最近没有时间，来不及做其他的了，今天就发了，别嫌弃不嫌弃不嫌弃~~~ 好漂亮！我也想要{:4_187:} 小文 发表于 2023-4-30 13:28
好漂亮！我也想要
小文好~~哈哈你也是想要个空房间啊{:4_170:} 首先欣赏{:4_187:} 岁月的空房间很漂亮{:4_199:} 晓得小辣椒肯定会做一个的 冬天的雨 发表于 2023-4-30 13:36
晓得小辣椒肯定会做一个的
冬雨来了{:4_187:} 冬天的雨 发表于 2023-4-30 13:36
首先欣赏
你来的也是快的{:4_189:} 小辣椒 发表于 2023-4-30 13:38
你来的也是快的
我手机看看，我在外面吃饭 冬天的雨 发表于 2023-4-30 13:38
我手机看看，我在外面吃饭
你放假就吃吃喝喝了 小辣椒 发表于 2023-4-30 13:39
你放假就吃吃喝喝了
是的，还在吃的，喝酒，，，，， 冬天的雨 发表于 2023-4-30 13:40
是的，还在吃的，喝酒，，，，，
你吃饭，晚上上来玩 小辣椒 发表于 2023-4-30 13:41
你吃饭，晚上上来玩
好，先下，晚上见{:4_197:}{:4_185:} 冬天的雨 发表于 2023-4-30 13:41
好，先下，晚上见
晚上见{:4_197:}{:4_185:} 新潮加时尚，就是一个美。
小辣椒朋友节日快乐！ 梦油 发表于 2023-4-30 16:52
新潮加时尚，就是一个美。
小辣椒朋友节日快乐！
谢谢梦油，节日快乐！
这个背景视频是走过岁月制作的，我是现成用的{:4_189:} 小辣椒 发表于 2023-4-30 17:25
谢谢梦油，节日快乐！
这个背景视频是走过岁月制作的，我是现成用的
小辣椒朋友下午好！我很喜欢你的作品。 梦油 发表于 2023-4-30 17:47
小辣椒朋友下午好！我很喜欢你的作品。
谢谢梦油喜欢{:4_187:}