《玫瑰恋情》 祝福母亲节快乐！
<style>
#papa {
margin: 150px-150px;
display: grid;
place-items: center;
width: 1164px;
height: 620px;
background: gray url('https://pan.doliy.cn/filestores/2023/05/14//bc58b254538709bf9fe68d0237fdc79d.jpg') no-repeat center/cover;
box-shadow: 0 0px 4px 0px hsla(0,0%,0%,.65);
user-select: none;
position: relative;
z-index: 1;
overflow:hidden;
}
#ptpt{width: 100%; display: grid;
place-items: center;
height: 100%;
background:url('001.jpg') no-repeat center/cover; user-select: none;
position:absolute;
z-index: 20;
animation: flash 10s infinite linear;
}
@keyframes flash { from {filter:hue-rotate(0deg) brightness(80%);} to {filter:hue-rotate(360deg)brightness(140%); } }
#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: #FFF000;--btn_size: 30px;--track: #FFF000;--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: 40%; top:87%;filter: drop-shadow( 0px 0px 1px #000000)drop-shadow( 0px 0px 1px #000000);font:normal 3em 华文行楷; color:#2cd111; 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: 20%; height: 100%;white-space: pre; background: linear-gradient(0deg, #1E9600 0%,#FFF200 50%,#FF0000 100%); -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
</style>
<div id="papa"><div id="ptpt"></div><div id="lrc" data-lrc="HCPlayer">HCPlayer</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://pan.doliy.cn/filestores/2023/05/14//ae3187bb8edd4fa8e191d806d4fe002d.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 = `《玫瑰恋情》歌手：任妙音
词：汪晓林 曲：颂今
祝福母亲节快乐！
又是一年玫瑰花儿开
我乘坐列车来到这美丽的清迈
花香丛中寻觅着你
风吹花海翻卷着我的情怀
就是在这个浪漫的季节
我和你相遇情窦初开
你的美丽赛过鲜花
让我的心儿荡了起来
啊你的美丽
让我的心儿荡了起来
又是一年玫瑰花儿开
我乘坐列车又来到美丽的清迈
花枝摇曳朵朵是你
花香阵阵拂动着我的心海
就是在这个迷人的城市
我和你重逢相知相爱
你的歌声赛过百灵
让我俩从此不再分开
啊你的歌声
让我俩从此不再分开
啊啊啊啊
你的歌声赛过百灵
让我俩从此不再分开
啊你的歌声
让我俩从此不再分开
啊你的歌声
让我俩从此不再分开`;
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)); top:75%; ',
player_css: '--ww: 900px;bottom: 30px;',
btn_txt: '✿',
});
ptpt.style.animationPlayState =aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => ptpt.style.animationPlayState = 'running');
aud.addEventListener('pause', () => ptpt.style.animationPlayState = 'paused');
aud.onerror = () => {
if(aud.error.code === 4) aud.src='https://pan.doliy.cn/filestores/2023/05/14//ae3187bb8edd4fa8e191d806d4fe002d.mp3';
}
})();
</script>
今天母亲节，祝福母亲节快乐！ 祝福母亲节快乐！{:10_403:} 撒雨老师好！借贴祝所有的母亲节日快乐{:10_402:} 祝所有的母亲节日快乐！问好撒雨{:10_402:} 母亲节快乐~ 母亲节快乐 欣赏精美制作，母亲节快乐~ 墨羽 发表于 2023-5-14 12:29
祝福母亲节快乐！
感谢欣赏{:9028:} 蜻蜓 发表于 2023-5-14 13:00
撒雨老师好！借贴祝所有的母亲节日快乐
谢谢了，我不是老师
页:
[1]
2