《充电》TO雨中悄然 （学习黑黑充电器效果）
<style>#papa {
margin: 80px 0 0 calc(50% - 593px);
width: 1024px;
height: 700px;
background: lightgreen url('https://pic.imgdb.cn/item/642d9351a682492fccb96bd5.jpg') center/cover no-repeat;
box-shadow: 3px 3px 20px #000;
display: grid;
place-items: center;
position: relative;
overflow: hidden;
}
#lrc {
--motion: cover2;
--tt: 2s;
--bg: linear-gradient(180deg, hsla(205, 100%, 85%, .75), hsla(120, 70%, 80%, .75));
position: absolute;
top: 80px;
font: bold 2.4em sans-serif;
color: snow;
white-space: pre;
-webkit-background-clip: text;
filter: drop-shadow(1px 1px 1px hsla(0, 0%, 0%, .95));
}
#lrc::before {
position: absolute;
content: attr(data-lrc);
width: 20%;
height: 100%;
color: transparent;
overflow: hidden;
white-space: pre;
background: var(--bg);
filter: inherit;
-webkit-background-clip: text;
animation: var(--motion) var(--tt) linear forwards;
animation-play-state: var(--state);
}
.mplayer {
width: 230px;
height: 30px;
border: 1px solid PaleTurquoise;
border-radius: 6px;
filter: drop-shadow(2px 2px 6px black);
cursor: pointer;
position: absolute;
right: 30px;bottom: 46px;
--ww: 0; --bg: dargreen; --time: .2s;
}
.mplayer::before, .mplayer::after {
position: absolute;
content: '';
background: var(--bg);
}
.mplayer::before {
width: var(--ww);
height: 100%;
border-radius: 6px;
opacity: .65;
}
.mplayer::after {
width: 10px;
height: 20px;
top: 5px;
right: -11px;
opacity: 1;
animation: flash var(--time) infinite alternate;
}
@keyframes charging {
to { width: 100%; }
}
.vid { position: absolute; width: 1024px; height: 375px; top: -55px; right:0px; object-fit: cover; opacity: .58; mix-blend-mode: screen;}
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
@keyframes flash { from { background: darkgreen; } to { background: red; } }
</style>
<div id="papa">
<video class="vid" src="https://img.tukuppt.com/video_show/15653652/01/59/07/63806a6eb7241_10s_big.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
<div id="lrc" data-lrc="HCPlayer">HCPlayer</div>
<div class="mplayer"></div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=410629544.mp3" autoplay loop></audio>
<script>
let averAdd = 0, offset = 0, mKey = 0, mFlag = true;
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));}
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;};
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 lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
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('seeked', () => calcKey());
let mplayer = document.querySelector('.mplayer');
let mState = () => aud.paused
? (mplayer.style.setProperty('--bg', 'LightCyan'), mplayer.style.setProperty('--time','.2s'))
: (mplayer.style.setProperty('--bg', 'PaleTurquoise'), mplayer.style.setProperty('--time','1s'));
mplayer.onclick = (e) => {
let x = e.offsetX, w = mplayer.offsetWidth;
if(x > w) aud.paused ? aud.play() : aud.pause();
if(x < w) aud.currentTime = aud.duration*x/w;
};
mplayer.onmousemove = (e) => {
let x = e.offsetX, w = mplayer.offsetWidth;
if(x > w) mplayer.title = '播放/暂停';
if(x < w) mplayer.title = '调节进度';
};
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
aud.addEventListener('timeupdate', () => {
mplayer.style.setProperty('--ww', aud.currentTime*mplayer.offsetWidth/aud.duration + 'px');
});
</script> 一个不注意到这么晚了，还好下午睡了一觉。
想着回悄然一个小礼，却一直没时间，借学习黑黑代码的机会，弄个回礼。做得不好，悄然别嫌弃@雨中悄然{:4_173:} 晚上充电正好，早上起来活力满满{:4_173:} 感谢黑黑的代码，@马黑黑看了回复才知道电池头那里可以暂停的，虽然没明白为什么是这样{:4_173:} 那个mplayer::after 里我想让它闪动，提示可以点击暂停，但是动态里无法用var(--state);用了就不动，只能这样了，暂停了还在闪。{:4_173:}折腾半天，弄不出来了，睡觉去。。。。{:4_430:} 给我耳目一新的感觉！
赶工的样纸。设计精巧大气，看着舒服，美的享受。
既然给电池加了附件，则可以使用附件来充当或多加一个音乐的播放/暂停按钮。 红影制作快速！点赞！{:4_187:} 嗬！都十二点多啦！我都睡醒一个觉儿了。红影朋友以后早点休息吧。 庶民 发表于 2023-4-6 04:59
给我耳目一新的感觉！
谢谢庶民临帖鼓励{:4_187:} 马黑黑 发表于 2023-4-6 08:13
赶工的样纸。设计精巧大气，看着舒服，美的享受。
既然给电池加了附件，则可以使用附件来充当或多加一个 ...
看到你那个帖子，想着能不能加个电线，然后就赶紧去做。
嗯，单独加个色块可能更简单。 亦是金 发表于 2023-4-6 08:15
红影制作快速！点赞！
谢谢亦是金老师，看到你的帖子才知道电池头是暂停按钮呢{:4_173:} 梦油 发表于 2023-4-6 09:22
嗬！都十二点多啦！我都睡醒一个觉儿了。红影朋友以后早点休息吧。
呵呵，通常不会这么晚，昨天清明放假，下午睡了一觉，所以晚上不困。谢谢梦油关心{:4_187:} 红影 发表于 2023-4-6 09:58
看到你那个帖子，想着能不能加个电线，然后就赶紧去做。
嗯，单独加个色块可能更简单。
附件可以是更丰富的 红影 发表于 2023-4-6 10:01
呵呵，通常不会这么晚，昨天清明放假，下午睡了一觉，所以晚上不困。谢谢梦油关心
影子朋友别客气。 马黑黑 发表于 2023-4-6 12:06
附件可以是更丰富的
我弄都弄不出来，还考虑什么丰富啊{:4_173:} 梦油 发表于 2023-4-6 14:29
影子朋友别客气。
嗯，问好梦油{:4_187:} 红影 发表于 2023-4-6 15:12
嗯，问好梦油
谢谢！ 很真实的充电器，欣赏问好！{:4_204:} 来了有礼物收，真是惊喜{:4_187:}谢谢影宝，辛苦你做这么迟，抱个。。。{:4_183:}