每个夜晚为你失眠 TO：走过岁月
<style>
#papa {
margin: 150px-340px;
place-items: center;
width: 1283px;
height: 731px;
background:#000000 ; border-radius: 12px;display: grid;
box-shadow: 0 0px 4px 0px hsla(0,0%,0%,.65);
user-select: none;
position: relative;
z-index: 1;
overflow:hidden;
}
#tup{ display: grid;
width: 100%;
height: 100%;
background:url('https://xlaj.cn/assets/file/zp/20230604224730.jpg')center/cover no-repeat;
left: 0%; top:0%;
transform: rotateY(180deg);
position:absolute;
z-index: 1;
}
#tup1{width: 100%;display: grid;
mix-blend-mode:lighten;
height: 100%;
left: 0%; top:0%;
position:absolute;
z-index: 2;
opacity: 1;
}
#tup2{width: 12px;display: grid;
height: 20px;
left: 40%; top:26%;
position:absolute;transform: rotateY(180deg);
z-index: 3;
opacity: 1;
}
#tup3{width: 12px;display: grid;
height: 20px; mix-blend-mode: difference;
left: 60%; top:35%;-webkit-mask-image: radial-gradient(black 30% ,transparent 80%);
position:absolute;
z-index: 5;
opacity: 1;
}
#tup4{width: 12px;display: grid;
height: 20px;
left: 30%; top:25%;
position:absolute;
z-index: 3;
opacity: 1;
}
#mplayer {position: absolute;grid-template-columns: auto auto auto;gap: 8px;display: grid;place-items: center;color: var(--color);font: normal 12px sans-serif;z-index: 999;--ww: 500px;--color: #ffffff;--btn_size: 30px;--track: #ffffff;--prog: #FF0000;}
#btnplay {--state: paused;margin-right: -5px;font: bold var(--btn_size) / var(--btn_size) serif;cursor: pointer;animation: rot 4s infinite linear;animation-play-state: var(--state);}
@keyframes rot { to { transform: rotate(1turn); } }
#prog {--xx: 0px;width: var(--ww);height: 2px;border-radius: 8px;background: var(--track
);position: relative;cursor: pointer;}
#prog::before {position: absolute;content: '';width: var(--xx);height: 100%;border-radius: 8px;background: var(--prog);}
@keyframes cover1{ from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
#lrc { --motion: cover2; --tt: 2s;--state: paused;--bg: linear-gradient(180deg, hsla(240, 50%, 50%, .25), hsla(240, 30%, 50%, .75));position: absolute;left: 20%; top:10%;filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);font:normal 2.8em 隶书;color:#007811; z-index: 100; transform: translate(-30%, 10px);-webkit-background-clip: text;white-space: pre;}
#lrc::before { position: absolute; content: attr(data-lrc); color: transparent; width: 30%; height: 100%;white-space: pre; background:#880000;-webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
</style>
<div id="papa">
<div id="tup"></div>
<div id="tup1"><img id="pp"src="https://xlaj.cn/assets/file/zp/20230604224524.gif" width="100%" height="100%"></div>
<div id="tup2"><img id="pp0"src="https://111t.net/assets/file/zp/20230509112430.jpg" width="100%" height="100%"></div>
<div id="tup3"><img id="pp1"src="https://111t.net/assets/file/zp/20230509112430.jpg" width="100%" height="100%"></div>
<div id="tup4"><img id="pp2"src="https://111t.net/assets/file/zp/20230509112430.jpg" width="100%" height="100%"></div>
<div id="lrc" data-lrc="每个夜晚为你失眠">每个夜晚为你失眠</div><div id="mplayer"><span id="btnplay"></span><span id="prog"></span><span id="tmsg">00:00 | 00:00</span></div></div>
<audio id="aud" src="https://xlaj.cn/assets/file/zp/20230603223019.mp3" loop autoplay></audio>
<script >
(function() {
(function(mkPlayer) {let defaults = {lrcAr: [],lrc_css: 'top: 10px; left: 50%; transform: translateX(-50%);',player_css: 'bottom: 20px; left: 50%; transform: translateX(-50%);',btn_txt: '✿',playerCode: ``,};let playCode = (user_config) => {let data = Object.assign({}, defaults, user_config);papa.innerHTML += data.playerCode;mplayer.style.cssText += data.player_css;lrc.style.cssText += data.lrc_css;btnplay.innerHTML = data.btn_txt;let mKey = 0, mFlag = true;btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;aud.addEventListener('timeupdate', () => {let prg = aud.currentTime * prog.offsetWidth / aud.duration < 6 ? 6 : aud.currentTime * prog.offsetWidth / aud.duration;tmsg.innerText = `${toMin(aud.currentTime)} | ${toMin(aud.duration)}`;prog.style.setProperty('--xx', prg + 'px');for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime >= data.lrcAr) {cKey = j;if (mKey === j) showLrc(data.lrcAr);else continue;}}});aud.addEventListener('pause', () => mState());aud.addEventListener('play', () => mState());aud.addEventListener('seeked', () => calcKey());let mState = () => aud.paused ? (lrc.style.setProperty('--state','paused'),btnplay.style.setProperty('--state', 'paused')) : (lrc.style.setProperty('--state','running'),btnplay.style.setProperty('--state', 'running'));let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = data.lrcAr;lrc.dataset.lrc = data.lrcAr.replace(/<br>/, '\n');lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');lrc.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};let calcKey = () => {for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime <= data.lrcAr) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > data.lrcAr.length - 1) mKey = data.lrcAr.length - 1;let time = data.lrcAr - (aud.currentTime - data.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;}};mkPlayer.HCPlayer = playCode;})(this);
(function(mkFS) {let setFullScreen = (user_set) => {let pa = user_set.pa;if(typeof(pa) !== 'object') return false;if(!user_set.set) user_set.set = 'color: snow; background: black; border: 2px solid snow; left: 40px; bottom: 40px;';btnMsg = document.createElement('span');btnMsg.style.cssText = `position: absolute; border-radius: 8px; padding: 4px; cursor: pointer; z-index:998; ${user_set.set}`;btnMsg.innerText = '全屏观赏';btnMsg.style.display = 'none';pa.appendChild(btnMsg);let timerId, fs = false;btnMsg.onclick = () => fs ? document.exitFullscreen() : pa.requestFullscreen();pa.addEventListener('mousemove', (e) => {clearTimeout(timerId);btnMsg.style.display = 'block';timerId = setTimeout('btnMsg.style.display = "none"', 3000);});document.addEventListener('fullscreenchange', () => {if (document.fullscreenElement !== null) {fs = true;btnMsg.innerText = '退出全屏';} else {fs = false;btnMsg.innerText = '全屏观赏';}});};mkFS.FS = setFullScreen;})(this);
let averAdd = 0, offset = 0;
let geci = `每个夜晚为你失眠
歌手：马萃如
专辑：《什麼样的爱你才会懂》
发行时间：1991-08-23
问你想不想我
其实有一点傻
你可以看见我的心
说我最爱听的话
问你爱不爱我
其实有一点怕
你总是这样不经心
给我逃避的回答
每个夜晚为你失眠
每个明天都如此遥远
你的承诺都已经改变
我怎能相信永远
如果把爱当作心愿
是不是祈祷就能实现
每天我会在睡觉前
唸你的名字一千遍
问你爱不爱我
其实有一点怕
你总是这样不经心
给我逃避的回答
每个夜晚为你失眠
每个明天都如此遥远
你的承诺都已经改变
我怎能相信永远
如果把爱当作心愿
是不是祈祷就能实现
每天我会在睡觉前
唸你的名字一千遍
每个夜晚为你失眠
每个明天都如此遥远
你的承诺都已经改变
我怎能相信永远
如果把爱当作心愿
是不是祈祷就能实现
每天我会在睡觉前
唸你的名字一千遍
谢谢欣赏
`;
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 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));}
HCPlayer({
lrcAr: getLrcAr(geci),
lrc_css: ' --bg: linear-gradient(hsla(90,80%,50%,.35),hsla(100,70%,45%,.6)); left: 20%;top:10%; ',
player_css: '--ww: 620px; bottom: 7%; left: 22%;',
btn_txt: '✿',
});
aud.onerror = () => {
if(aud.error.code === 4) aud.src='https://xlaj.cn/assets/file/zp/20230603223019.mp3 ';
}
})();
</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 = ''; image0.style.opacity = '';image1.style.opacity = '';image2.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("pp"),
image0 = document.getElementById("pp0"),
image1 = document.getElementById("pp1"),
image2 = document.getElementById("pp2"),
button = document.getElementById("mplayer");
if (image1 &&image0 &&image && button) {
button.onclick = function() {
if (this.value == '') {
image.play(); image0.play(); image1.play(); image2.play();
this.value = '.';
} else {
image.stop(); image0.stop();image1.stop(); image2.stop();
this.value = '';
}
};
}
</script>
@走过岁月 小辣椒 发表于 2023-6-6 21:35
@走过岁月
小辣椒留的沙发 岁月我用了你蒲公英的粒子效果，加了一首你的每个夜晚为你失眠{:4_173:} 做个简单的播放器效果，播放器控制背景动图 随风飘荡的蒲公英，小辣椒制作的很棒 还有星光点点，很丰富呢 画面跟音乐也衬 谢谢小辣椒的礼物，好开心 走过岁月 发表于 2023-6-6 21:37
随风飘荡的蒲公英，小辣椒制作的很棒
岁月来了 走过岁月 发表于 2023-6-6 21:38
还有星光点点，很丰富呢
我感觉这个蒲公英粒子很漂亮，只是我时间紧就2个合并一个了{:4_189:} 走过岁月 发表于 2023-6-6 21:39
画面跟音乐也衬
这个播放器控制背景动图，我上次也是玩过一次 走过岁月 发表于 2023-6-6 21:40
谢谢小辣椒的礼物，好开心
不用谢，岁月送小辣椒的太多的，我还礼太少了 谢谢岁月前面送小辣椒这么多的精美礼物{:4_179:} 小辣椒 发表于 2023-6-6 21:41
岁月来了
来了
小辣椒 发表于 2023-6-6 21:36
岁月我用了你蒲公英的粒子效果，加了一首你的每个夜晚为你失眠
嗯，很好 小辣椒 发表于 2023-6-6 21:36
做个简单的播放器效果，播放器控制背景动图
做得很好 小辣椒 发表于 2023-6-6 21:43
不用谢，岁月送小辣椒的太多的，我还礼太少了
叫你不用还礼了 小辣椒 发表于 2023-6-6 21:44
谢谢岁月前面送小辣椒这么多的精美礼物
不客气 {:4_179:} 走过岁月 发表于 2023-6-6 21:50
来了
最近我上来少，帖子也是做的少了