醉美水芙蓉 发表于 2023-4-23 20:52

阅读有光 - 胡夏

<style>
#papa {
      margin: 80px 0 0 calc(50% - 593px);
      width: 1024px;
      height: 700px;
      background: lightgreen url('https://pic2.imgdb.cn/item/6443aa5a0d2dde5777217dcf.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: 360px;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: 875px; top: -50px; 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/67/72/63db21822b3d8.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://www.qqmc.com/up/kwlink.php?id=272304678.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>

加林森 发表于 2023-4-23 21:14

制作的真不错。我掉队了。等我完全好了再来学习。

醉美水芙蓉 发表于 2023-4-23 22:05

加林森 发表于 2023-4-23 21:14
制作的真不错。我掉队了。等我完全好了再来学习。

谢谢队长支持！

红影 发表于 2023-4-23 23:09

这个是充电器效果。背景非常漂亮。欣赏水芙蓉好帖{:4_187:}

醉美水芙蓉 发表于 2023-4-24 06:33

红影 发表于 2023-4-23 23:09
这个是充电器效果。背景非常漂亮。欣赏水芙蓉好帖

红影美女早上好！

马黑黑 发表于 2023-4-24 07:21

来电了{:4_170:}

醉美水芙蓉 发表于 2023-4-24 11:51

马黑黑 发表于 2023-4-24 07:21
来电了

黑黑老师中午好！

马黑黑 发表于 2023-4-24 11:54

醉美水芙蓉 发表于 2023-4-24 11:51
黑黑老师中午好！

中午好

梦缘 发表于 2023-4-24 17:06

欣赏您的精彩，感谢分享！{:4_171:}

红影 发表于 2023-4-24 20:12

醉美水芙蓉 发表于 2023-4-24 06:33
红影美女早上好！

问好水芙蓉，你那么早啊{:4_187:}

醉美水芙蓉 发表于 2023-4-24 20:27

梦缘 发表于 2023-4-24 17:06
欣赏您的精彩，感谢分享！

谢谢朋友支持！

加林森 发表于 2023-5-1 20:40

醉美水芙蓉 发表于 2023-4-23 22:05
谢谢队长支持！

不客气。
页: [1]
查看完整版本: 阅读有光 - 胡夏