论坛 › 欢乐水吧 › 桃花诺

东篱闲人 发表于 2023-9-3 09:57

桃花诺

<div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_1954997">
<br /><br /><style>
#papa{ margin: 100px -300px;width: 1200px;box-shadow: 0px 0px 0px 0px #cccccc, 0px 0px 0px 0px #880000; overflow: hidden;height: 750px;background: url('https://pic.imgdb.cn/item/64f3e652661c6c8e54f7fadd.jpg') no-repeat center/cover;border: 0px solid;display: grid;position: relative;z-index: 12345; --state: running;}

.photo {width: 100%; height: 100%;
    position: absolute;z-index: 1;
    top:0px; left:0px;
    opacity: 0;
    animation: round 180s linear infinite;}
@keyframes round {
0% { -webkit-transform:rotate(0)scale(1)translate(0%,0%); opacity:0}
2% { -webkit-transform:rotate(0)scale(1.5)translate(-10%,0%); opacity:1}
4% { -webkit-transform:rotate(0)scale(1.5)translate(0%,10%)rotateZ(0deg); opacity:1}
6% { -webkit-transform:rotate(0)scale(1.5)translate(0%,-10%)rotateZ(0deg); opacity:1}
8% { -webkit-transform:rotate(0)scale(1.5)translate(10%,0%)rotateZ(0deg); opacity:1}
10% { -webkit-transform:rotate(0deg)scale(1.5)translate(0%,0%)rotateZ(0deg); opacity:0}
}
img:nth-child(1) {animation-delay: 162s;}
img:nth-child(2) {animation-delay: 144s;}
img:nth-child(3) {animation-delay: 126s;}
img:nth-child(4) {animation-delay: 108s;}
img:nth-child(5) {animation-delay: 90s;}
img:nth-child(6) {animation-delay: 72s;}
img:nth-child(7) {animation-delay: 54s;}
img:nth-child(8) {animation-delay: 36s;}
img:nth-child(9) {animation-delay: 18s;}
img:nth-child(10) {animation-delay: 0s;}
.stop img:nth-child(1),
.stop img:nth-child(2),
.stop img:nth-child(3),
.stop img:nth-child(4),
.stop img:nth-child(5),
.stop img:nth-child(6),
.stop img:nth-child(7),
.stop img:nth-child(8),
.stop img:nth-child(9),
.stop img:nth-child(10){animation-play-state: paused;}

#dt{position: absolute;top:0%; left:0%;width: 100%;height: 100%;mix-blend-mode: lighten;z-index: 3; transform: rotateX(0deg);}
#prog { position: absolute; bottom: 60px; width: 180px; height: 12px; background: linear-gradient(to right, snow var(--prg), gray 0) repeat-x 0 50% / 100% 1px;left:12%; color: snow; display: grid; place-items: center; --prg: 0%; --state: paused; z-index: 999;}
#prog::before, #prog::after { position: absolute; top: 10px; }
#prog::before { content: attr(data-cu); left: 0; }
#prog::after { right: 0; content: attr(data-du); }
#slider { position: absolute; width: 3px; height: 7px; background: snow; left: var(--prg); }
#btnplay { position: absolute; top: -20px;font: normal 3.3em/0em serif;
color:#ffffff; cursor: pointer; animation: rot 6s infinite linear var(--state); }
@keyframes rot { to { transform: rotate(1turn); } }

#lrc {
      --state: paused;
      --motion: cover2;
      --tt: 2s;
      --bg: linear-gradient(0deg, #ff0000, #ff0000, #ff0000);
      position: absolute;z-index: 6;
      left: 52%;
      transform: translate(-50%);
      top: 85%;
      font:normal 3em 华文行楷;
      font-weight:800;
      color: #0000;
      white-space: pre;
      -webkit-background-clip: text;
      filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);
}
#lrc::before {
      position: absolute;
      content: attr(data-lrc);
      width: 20%;
      height: 100%;
      color: transparent;
      overflow: hidden;
      white-space: pre;
      background: var(--bg);
      -webkit-background-clip: text;
      animation: var(--motion) var(--tt) linear forwards;
      animation-play-state: var(--state);
}
@keyframes cover1{   0% { width: 100%;transform:rotate(0deg)scale(0)}100% { width: 100%;transform:rotate(0deg)scale(1);filter:hue-rotate(360deg)}}
@keyframes cover2 {    0% { width: 100%;transform:rotate(0deg)scale(0)}100% { width: 100%;transform:rotate(0deg)scale(1);filter:hue-rotate(360deg)}}
#papa:hover #fullscreen { display:block ;}
#fullscreen { position: absolute; top:5%; left:85%;color:#ffffff; filter:drop-shadow( 1px 1px 1px #000000);font: normal 2.6em 华文隶书; opacity: 1; cursor: pointer; z-index: 1111}
                        </style>

<div id="papa">
<span id="fullscreen">全屏观赏</span>
<div id='dt'><img id="Img" src="https://pic.imgdb.cn/item/64f335fd661c6c8e54d6b032.png" width="100%" height="100%"></div>

<div id="testImg" >
<img class="photo"
src="https://pic.imgdb.cn/item/64f3e211661c6c8e54f77e2c.jpg" /><img class="photo"
src="https://pic.imgdb.cn/item/64f3e22e661c6c8e54f782bd.jpg" /><img class="photo"
src="https://pic.imgdb.cn/item/64f3e255661c6c8e54f789cc.jpg" /><img class="photo"
src="https://pic.imgdb.cn/item/64f3e272661c6c8e54f78d5c.jpg" /><img class="photo"
src="https://pic.imgdb.cn/item/64f3e28f661c6c8e54f7905f.jpg" /><img class="photo"
src="https://pic.imgdb.cn/item/64f3e211661c6c8e54f77e2c.jpg" /><img class="photo"
src="https://pic.imgdb.cn/item/64f3e22e661c6c8e54f782bd.jpg" /><img class="photo"
src="https://pic.imgdb.cn/item/64f3e255661c6c8e54f789cc.jpg" /><img class="photo"
src="https://pic.imgdb.cn/item/64f3e272661c6c8e54f78d5c.jpg" /><img class="photo"
src="https://pic.imgdb.cn/item/64f3e28f661c6c8e54f7905f.jpg" />
</div>

<div id="lrc" data-lrc="花潮lrc在线">花潮lrc在线</div>
    <div id="prog" data-cu="00:00" data-du="00:00" title="调节进度">
       <span id="btnplay" title="播放/暂停"> <P id="btn" >❊</p></span>
         <span id="slider"></span>
    </div>
</div>

<audio id="aud" src="https://music.163.com/song/media/outer/url?id=480579393.mp3" autoplay="" loop=""></audio>
<script>
let toMin = (val) => { if (!val) return '00:00'; let min = parseInt(val / 60), sec = parseFloat(Math.floor(val) % 60); if(sec < 10) sec = '0' + sec; return min + ':' + sec; }
let mState = () => prog.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('pause', mState, false);
aud.addEventListener('play', mState, false);
aud.addEventListener('timeupdate', () => { prog.style.setProperty('--prg', aud.currentTime / aud.duration * 100 + '%'); prog.dataset.cu = toMin(aud.currentTime); prog.dataset.du = toMin(aud.duration); });
btnplay.onclick = (e) => { e.stopPropagation(); aud.paused ? aud.play() : aud.pause(); }
prog.onclick = (e) => aud.currentTime = e.offsetX * aud.duration / prog.offsetWidth;
</script>

<script>
let toMin = (val) => { if (!val) return '00:00'; let min = parseInt(val / 60), sec = parseFloat(Math.floor(val) % 60); if(sec < 10) sec = '0' + sec; return min + ':' + sec; };
let mState = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
aud.addEventListener('timeupdate', () => {
      let prg = aud.currentTime / aud.duration * 100 + 20;
      mplayer.style.setProperty('--prg', prg + '%');
});
btnP1.onclick = btnP2.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('timeupdate', () => { mplayer.style.setProperty('--prg', aud.currentTime / aud.duration * 100 + '%');mplayer.dataset.tt = toMin(aud.currentTime) + '\n' + toMin(aud.duration);for (j = 0; j < data.lrcAr.length; j++) { if (aud.currentTime >= data.lrcAr) { if (mKey === j) showLrc(data.lrcAr);   else continue; } } });
progP.onclick = (e) => aud.currentTime = e.offsetX * aud.duration / progP.offsetWidth;
</script>
<script >
(function() {
/*原始lrc歌词*/
let lrcStr = `
作词 : 张赢
作曲 : 罗锟
编曲 : 罗锟/陈雪燃
制作人 : 张赢/陈雪燃
制作人（美国）：Xueran Chen
制作人（中国）：张赢
人声录音师：姚海毅
和音：赵贝尔
管弦乐团：Hungarian symphonic orchestras
吉他：Jacob Boyd
中国笛：Chris Bleth
大提琴：Ro Rowan
缩混工程师：NEM Studios
母带工程师：Randy Merrill
监制：宋鹏飞
音乐出品发行公司：听见时代传媒

初见若缱绻 誓言 风吹云舒卷

岁月间 问今夕又何年

心有犀但愿 执念 轮回过经年

弹指间 繁花开落多少遍

这一世牵绊 纠结 触动了心弦

下一世 不知可否再见

留一片桃花 纪念 了却浮生缘

眉目间 还有我的思念

一寸土 一年木 一花一树一贪图

情是种 爱偏开在迷途

忘前路 忘旧物 忘心忘你忘最初

花斑斑 留在爱你的路

这一世牵绊 纠结 触动了心弦

下一世 不知可否再见

留一片桃花 纪念 了却浮生缘

眉目间 还有我的思念

一寸土 一年木 一花一树一贪图

情是种 爱偏开在迷途

忘前路 忘旧物 忘心忘你忘最初

花斑斑 留在爱你的路

虔诚夙愿 来世路

一念桃花因果渡

那一念 几阙时光在重复

听雨书 望天湖 人间寥寥情难诉
回忆斑斑 留在爱你的路

`;

/*变量 ：mKey - 当前歌词索引；mFlag ：调用关键帧动画索引；averAdd ：平均值补偿*/
let mKey = 0, mFlag = true, averAdd = 0.3;

/*函数 ：获取每句歌词用时，歌词用时若超过平均值则取平均值，最后一句歌词则取平均值*/
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;
};

/*函数 ：从原始lrc歌词获取信息并存入 n*3 数组*/
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;
};

/*函数 ：处理当前歌词索引 mKey*/
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 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;
}

/*函数 ：关键帧动画状态切换*/
let mState = () => aud.paused ? (lrc.style.setProperty('--state','paused'),mplayer.style.animationPlayState = 'paused') : (lrc.style.setProperty('--state','running'),mplayer.style.animationPlayState = 'running');

/*监听播放进度*/
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('pause', () => mState());/*监听暂停事件*/
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr); /*获得歌词数组*/
})();
let fs = true;
      fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出全屏',papa.requestFullscreen()) : (fullscreen.innerText = '全屏观赏', document.exitFullscreen());
                fs = !fs;
      };

</script>

</td></tr></table>


</div>
<div id="comment_1954997" class="cm">
</div>

红影 发表于 2023-9-3 10:06

让美女图和文字封面交替出现，这个改进好。东篱大哥很动脑筋呢，点赞{:4_199:}

马黑黑 发表于 2023-9-3 10:11

本帖最后由 马黑黑 于 2023-9-3 11:34 编辑

诺有了，运就在眼前

醉美水芙蓉 发表于 2023-9-3 10:27

醉美水芙蓉 发表于 2023-9-3 10:30

东篱闲人 发表于 2023-9-3 11:35

红影 发表于 2023-9-3 10:06
让美女图和文字封面交替出现，这个改进好。东篱大哥很动脑筋呢，点赞

瞎琢磨。。。。。{:5_117:}

东篱闲人 发表于 2023-9-3 11:36

马黑黑 发表于 2023-9-3 10:11
诺有了，运就在眼前

你的运到啦。。。{:5_112:}

东篱闲人 发表于 2023-9-3 11:36

醉美水芙蓉 发表于 2023-9-3 10:30
一个字美！两个字漂亮！三个字太漂亮啦！

有那么严重？{:4_172:}

马黑黑 发表于 2023-9-3 12:05

东篱闲人 发表于 2023-9-3 11:36
你的运到啦。。。

好运连连

东篱闲人 发表于 2023-9-3 12:09

马黑黑 发表于 2023-9-3 12:05
好运连连

桃花运连连。。。。

小辣椒 发表于 2023-9-3 12:25

老头做的特别漂亮，就是我手机找播放器找了蛮久，电脑欣赏肯定更加美的

红影 发表于 2023-9-3 12:39

东篱闲人 发表于 2023-9-3 11:35
瞎琢磨。。。。。

琢磨得挺有成果{:4_205:}

东篱闲人 发表于 2023-9-3 14:25

小辣椒 发表于 2023-9-3 12:25
老头做的特别漂亮，就是我手机找播放器找了蛮久，电脑欣赏肯定更加美的

俺都不会用手机看。。。

东篱闲人 发表于 2023-9-3 14:26

红影 发表于 2023-9-3 12:39
琢磨得挺有成果

{:5_117:}

红影 发表于 2023-9-3 20:08

东篱闲人 发表于 2023-9-3 14:26


聪明{:4_187:}

马黑黑 发表于 2023-9-3 23:26

东篱闲人 发表于 2023-9-3 12:09
桃花运连连。。。。

说太直白了，得含蓄

东篱闲人 发表于 2023-9-4 18:34

马黑黑 发表于 2023-9-3 23:26
说太直白了，得含蓄

再含蓄一会，黄花菜都凉了。。。。{:4_172:}

查看完整版本: 桃花诺