亚伦影音工作室 发表于 2025-1-11 21:00

情花毒 - 乔玲儿

本帖最后由 亚伦影音工作室 于 2025-1-11 21:06 编辑 <br /><br /><style>
#bj{position: relative;width: 1186px;height: 620px;MARGIN-LEFT:-300px;margin-top:150px;;overflow:hidden;background:url(https://pic1.imgdb.cn/item/6718e20fd29ded1a8ce01101.jpg)no-repeat center / cover;}
#geci{--motion:cover2;--tt:2s;--state:paused;--bg:#880000;position:absolute;left: 50%; transform: translate(-50%);top: 85%;font:100 3.2em 华文隶书;color:#000080;white-space:pre;-webkit-background-clip:text; filter:drop-shadow(#fff 1px 0 0)drop-shadow(#fff 0 1px 0)drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px0);}
#geci::before{position: absolute;content: attr(data-geci);width: 100%; height: 100%;color: transparent;overflow: hidden;white-space: pre;background: var(--bg);clip-path: inset(0 100% 0 0);-webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}
@keyframes cover1{ to { clip-path: inset(0 0 0 0); } }@keyframes cover2 { to { clip-path: inset(0 0 0 0); } }
#btnplay { width: 60px; height: 60px; cursor: pointer;LEFT:2%;top:88%; animation: rotating 6s infinite linear ;position:absolute;background:url(https://pic1.imgdb.cn/item/65141b72c458853aef4cff4a.png)no-repeat center / cover; }
@keyframes rotating { to { transform: rotate(360deg); } }

#fullscreen { opacity:1;position: absolute; width: 40px; height: 40px; top:88%; cursor: pointer;right: 2%;z-index: 40;}
#bj:hover #fullscreen { opacity:1;}
#全屏{ width: 40px; height: 40px; position: absolute;background:url(https://pic1.imgdb.cn/item/6774df83d0e0a243d4ed4fd7.png)no-repeat center/cover;
}
#退出{ width: 40px; height: 40px; position: absolute;opacity:0;background:url(https://pic1.imgdb.cn/item/6774df8bd0e0a243d4ed4fd9.png)no-repeat center/cover; }
</style>
<div id="bj">
<div id="btnplay" title="播放/暂停"></div>
<audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w7/audio/56/7d/31/a7a7cec4a2268523d63b8f8c631f35f4/audio.mp3" loop autoplay></audio>
<div id="geci">情花毒 - 乔玲儿</div>
<span id="fullscreen" title="全屏展示/退出全屏">
<div id="全屏"></div>
<div id="退出" ></div>
</span>
</div>
<script>
let lrc = `情花毒 - 乔玲儿
词：倪金茂
曲：乔玲儿
混音：卢晓武
发行：环斯文化传媒
你莲花一吐
我心被俘虏
你像彩云漂浮
我一如既往
痴恋如故
是幸福还是痛苦
你支支吾吾
态度似迷雾
春秋几度
你音信全无
可我义无反顾
执迷不悟
我已中了你的情花的毒
天使和魔鬼已分不清楚
我只想知道
我只想知道
我是你美丽公主
我已中了你的情花的毒
即使你辜负我也满足
你若再爱我一次
你若再爱我一次
就是我今生最大幸福
你支支吾吾
态度似迷雾
春秋几度
你音信全无
可我义无反顾
执迷不悟
我已中了你的情花的毒
天使和魔鬼已分不清楚
我只想知道
我只想知道
我是你美丽公主
我已中了你的情花的毒
即使你辜负我也满足
你若再爱我一次
你若再爱我一次
就是我今生最大幸福
我已中了你的情花的毒
天使和魔鬼已分不清楚
我只想知道
我只想知道
我是你美丽公主
我已中了你的情花的毒
即使你辜负我也满足
你若再爱我一次
你若再爱我一次
就是我今生最大幸福
就是我今生最大幸福
`;
aud.addEventListener("seeked", myFunction)
aud.addEventListener("timeupdate", mylrc);
let mKey = 0, mFlag = true;

function 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));
      tmpAr.push(aver);
      tmpAr.forEach((item,key) => {
                ar = item > aver ? aver : item;
      });
      return ar;
};
function getLrcAr(str) {
      str = str.trim();
      let lines = [], lrcAr = [];
      let reg = /\[(\d{1,}:\d{1,}.\d{1,})\](.*)/g;
      if(!str.match(reg)) return;
      lines = str.replace(reg,'$1-{}-$2').split('\n');
      for(k = 0; k < lines.length; k ++) {
                lrcAr = [];
                for(j = 0; j < 3; j ++) {
                        let tmpAr = lines.split('-{}-');
                        lrcAr = j === 0 ? toSecs(tmpAr) : tmpAr;
                }
      }
      return lrcTime(lrcAr);
};
function toSecs (lrcTime){
      let reg = /\d{2,}/g;
      let ar = lrcTime.match(reg);
      return ar*60 + parseInt(ar) + parseInt((ar)/1000);
};

function showLrc(time){
      let name = mFlag ? 'cover1' : 'cover2';
      geci.innerHTML = lrcAr;
      geci.dataset.geci = lrcAr;
      geci.style.setProperty('--motion', name);
      geci.style.setProperty('--tt', time + 's');
      geci.style.setProperty('--state', 'running');
      mKey += 1;
      mFlag = !mFlag;
};

function myFunction(){
      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);
};

function mylrc() {
      for (j = 0; j < lrcAr.length; j++) {
                if (aud.currentTime >= lrcAr) {
                        cKey = j;
                        if (mKey === j) showLrc(lrcAr);
                        else continue;
                }
      }
}
aud.addEventListener('play', playing,false);
aud.addEventListener('pause', playing,false);
function playing() {
geci.style.setProperty('--state', aud.paused ? 'paused' : 'running');
}
let lrcAr = getLrcAr(lrc);
</script>
<script>
btnplay.onclick = () => aud.paused ? (aud.play(),btnplay.style.animationPlayState = 'running') :( aud.pause(),btnplay.style.animationPlayState = 'paused');

let fs= true;
fullscreen.onclick = () => {
      fs ? (bj.requestFullscreen(),全屏.style.opacity= '0',退出.style.opacity = '1') : ( document.exitFullscreen(),全屏.style.opacity = '1',退出.style.opacity = '0');
      fs = !fs;
}
</script>

红影 发表于 2025-1-11 21:43

又一个漂亮的全屏和退出全屏标志，欣赏亚伦老师好帖{:4_199:}

小辣椒 发表于 2025-1-11 22:45

亚伦最近精彩不断，小辣椒上来总能看见亚伦的新产品{:4_178:}

小辣椒 发表于 2025-1-11 22:47

这个就一个图，套用应该很方便的

老谟深虑 发表于 2025-1-12 18:19

         欣赏老师的佳作，点赞！
页: [1]
查看完整版本: 情花毒 - 乔玲儿