《一转身一辈子》冰姐
本帖最后由 焱鑫磊 于 2023-5-15 20:33 编辑 <br /><br /><style>#papa {
margin: 100px-280px;
display: grid;
place-items: center;
width: 1164px;
height: 640px;
background: url('https://pic2.imgdb.cn/item/6460f1650d2dde5777691cb5.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;
mix-blend-mode: lighten;
height: 100%;
mix-blend-mode: darken;
user-select: none;
position:absolute;
z-index: 2;
opacity: .4;filter:brightness(550%);
}
#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: 40%; top:87%;filter: drop-shadow( 0px 0px 1px #ffffff)drop-shadow( 0px 0px 1px #ffffff)drop-shadow( 0px 0px 1px #ffffff);font:normal 3em 华文行楷;color:#000078; 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="ptpt"><img id="pp"src="https://pic2.imgdb.cn/item/646104230d2dde57779ff077.gif" width="100%" height="100%"></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://www.kumeiwp.com/sub/filestores/2023/05/14/3b5c193dd7173b867c0eaae33d57b7ec.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 = `《一转身一辈子》冰姐
词：绿柳 曲：张见
LRC歌词制作：焱鑫磊
就要离开这个城市
心也变得若有所失
不知不觉眼睛有些潮湿
给你留下那把爱情的钥匙
不想把你影子丢失
谁能读懂我的心事
默默退下手上戴的戒指
放进那个记忆尘封的盒子
这一转身 也许就是一辈子
这一生爱 也许变成一段故事
如果真的还有来生
你是不是还愿意和我相识
这一转身 也许就是一辈子
这一段情 也许变成一段往事
如果真的还有来世
你是不是还愿意和我手相执
就要离开这个城市
心也变得若有所失
不知不觉眼睛有些潮湿
给你留下那把爱情的钥匙
不想把你影子丢失
谁能读懂我的心事
默默退下手上戴的戒指
放进那个记忆尘封的盒子
这一转身 也许就是一辈子
这一生爱 也许变成一段故事
如果真的还有来生
你是不是还愿意和我相识
这一转身 也许就是一辈子
这一段情 也许变成一段往事
如果真的还有来世
你是不是还愿意和我手相执
这一转身 也许就是一辈子
这一生爱 也许变成一段故事
如果真的还有来生
你是不是还愿意和我相识
这一转身 也许就是一辈子
这一段情 也许变成一段往事
如果真的还有来世
你是不是还愿意和我手相执
你是不是还愿意和我手相执
`; 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:80%; ',
player_css: '--ww: 900px;bottom: 10px;',
btn_txt: '❄',
});
FS({
pa: papa,
set: 'backgroun: #333; color: snow; border: 2px solid snow; bottom: 90%; left: 20px;',
});
aud.onerror = () => {
if(aud.error.code === 4) aud.src='https://www.kumeiwp.com/sub/filestores/2023/05/14/3b5c193dd7173b867c0eaae33d57b7ec.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 = '';
}
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"),
button = document.getElementById("mplayer");
if (image && button) {
button.onclick = function() {
if (this.value == '') {
image.play();
this.value = '.';
} else {
image.stop();
this.value = '';
}
};
}
</script>
欣赏佳作，上午好！ 问好！欣赏佳作！{:4_187:} 这个用光柱来做颜色变化，非常好，为背景带来了更丰富的表现。欣赏焱鑫磊好帖{:4_199:} 起个网名好难 发表于 2023-5-15 08:54
欣赏佳作，上午好！
问好！{:4_187:} 亦是金 发表于 2023-5-15 09:29
问好！欣赏佳作！
问候亦是金好！{:4_204:} 红影 发表于 2023-5-15 11:45
这个用光柱来做颜色变化，非常好，为背景带来了更丰富的表现。欣赏焱鑫磊好帖
问好红影！{:4_187:} 焱鑫磊 发表于 2023-5-15 20:29
问好红影！
问好焱鑫磊，新周快乐{:4_187:} 真美丽，欣赏点赞！{:4_171:} 梦缘 发表于 2023-5-16 10:18
真美丽，欣赏点赞！
问候梦缘好！{:4_187:}
页:
[1]