《开往早晨的午夜》张碧晨（改编）
本帖最后由 焱鑫磊 于 2023-5-24 21:41 编辑 <br /><br /><style>#papa {
margin: 100px -280px;
place-items: center;
width: 1164px;
height: 640px;
background:#000000 ; border-radius: 0%;display: grid;
box-shadow: 0 0px 4px 0px hsla(0,0%,0%,.65);
user-select: none;
position: relative;
z-index: 1;
overflow:hidden;
}
#ptpt{width: 100%;
height: 100%;display: grid;
left: 0%; top:0%;
background:#00f000 url(https://img.fy6b.com/2023/05/24/3c17151f0f9fd.jpg)no-repeat center/cover;
position:absolute;
z-index: 4;
opacity: 1;
animation: ptpt 3s infinite linear;
}
@keyframes ptpt{0%{filter:hue-rotate(360deg);}100%{filter:hue-rotate(0deg)}}
#ptpu{width: 400px;display: grid;
height: 260px;mix-blend-mode:normal;
left: 0%; top:60%;border-radius: 0%;
position:absolute;opacity: 1;
z-index: 4;transform:translate(0%,0%)scale(0.6);
overflow:hidden;
}
#ptpn{width: 400px;display: grid;
height: 260px;
left: 70%; top:20%;
position:absolute;transform: rotateY(180deg);
z-index: 5;
opacity: 0.8;
}
#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: 25px;--track: #ffffff;--prog: #000000;}
#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%;color: #ff0000;} }
@keyframes cover2 { from { width: 0;color: #00ff00; } 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: 0%; top:0%;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.4em 华文新魏;color:#000078; z-index:100; transform: translate(-30%, 10px)perspective(150px)rotateY(20deg)rotate(20deg);-webkit-background-clip: text;white-space: pre;-webkit-box-reflect:below 0 -webkit-linear-gradient(transparent,transparent 10%,#FFFFFF)}
#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"></div>
<div id="ptpn"><img id="pp0"src="https://pic2.imgdb.cn/item/645611730d2dde5777c30c2f.gif" width="100%" height="100%"></div>
<div id="lrc" data-lrc="HCPlayer">HCPlayer</div>
<div id="ptpu">
<img id="pp1"src="https://pic2.imgdb.cn/item/64518dc30d2dde57779cde74.gif" width="100%" height="100%">
<div id="mplayer"><span id="btnplay"></span><span id="prog"></span><span id="tmsg">00:00 | 00:00</span></div>
</div>
</div>
<audio id="aud" src="https://www.joy127.com/url/105201.mp3" loop autoplay></audio>
<script >
(function() {
(function(mkPlayer) {let defaults = {lrcAr: [],lrc_css: 'top: 0px; left: 0%; transform: translateX(-50%);',player_css: 'bottom: 0px; ; 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: 0px 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:65%; left: 50%',
player_css: '--ww: 120px;top:57%;left: 23%;',
btn_txt: '✳',
});
FS({
pa: papa,
set: 'backgroun: #333; color: snow; border: 0px solid snow; bottom: 90%; left: 20px;font:normal 2em 华文行楷;',
});
aud.onerror = () => {
if(aud.error.code === 4) aud.src='http://antiserver.kuwo.cn/anti.s?rid=MUSIC_263613736&response=res&format=mp3|aac&type=convert_url&br=128kmp3&agent=iPhone&callback=getlink&jpcallback=getlink.mp3';
}
})();
ptpt.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>ptpt.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>ptpt.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;
// 透明度还原
image0.style.opacity = '';image1.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
image0 = document.getElementById("pp0"),
image1= document.getElementById("pp1"),
button = document.getElementById("mplayer");
button.onclick = function() {
if (this.value == '') {
image0.play(); image1.play();
this.value = '.';
} else {
image0.stop(); image1.stop();
this.value = '';
}
};
</script>
焱鑫磊一下做了这么多帖子，而且各个都漂亮。欣赏点赞{:4_199:} 画面很美，同步歌词的展现很别致，变色效果也挺好。给焱鑫磊点赞{:4_187:} 红影 发表于 2023-5-25 09:41
焱鑫磊一下做了这么多帖子，而且各个都漂亮。欣赏点赞
问好红影{:4_187:} 红影 发表于 2023-5-25 09:43
画面很美，同步歌词的展现很别致，变色效果也挺好。给焱鑫磊点赞
问候红影好！学习中。{:4_204:} 好美的帖，欣赏问好！{:4_185:} 梦缘 发表于 2023-5-25 10:52
好美的帖，欣赏问好！
问好梦缘！{:4_187:} 焱鑫磊 发表于 2023-5-25 09:48
问候红影好！学习中。
这个很多有特色的地方，制作真棒{:4_187:}
页:
[1]