论坛 › 动画音画 › 《总以为来日方长》梅朵

焱鑫磊 发表于 2023-9-15 05:13

《总以为来日方长》梅朵

本帖最后由 焱鑫磊 于 2023-9-15 10:29 编辑 <br /><br /><style>
#papa { margin: 100px 0 0 calc(50% - 681px); width: 1200px; height: 680px; box-shadow: 0px 0px 0px #000; position: relative; z-index: 1; display: grid; place-items: center; background:#000000 background: url('https://pic.imgdb.cn/item/6503721c661c6c8e5439d568.jpg') no-repeat center/cover; overflow: hidden; }
#vid { position: absolute; width: 100%; height: 100%; top:0%; object-fit: cover; pointer-events: none; z-index: -1; opacity: 1; }
.photo {width: 100%;
height: 100%;
position: absolute;z-index: 1;
top:0px; left:0px;
opacity: 0;
animation: round 60s linear infinite;-webkit-mask-image: radial-gradient(black 25% ,transparent 75%);}
@keyframes round{
0% {
-webkit-transform:rotate(0)scale(1.5)translate(10%,0%);
opacity:0}
4% {
-webkit-transform:rotate(0)scale(1.5)translate(-10%,0%);
opacity:1}
8% {
-webkit-transform:rotate(0)scale(1.5)translate(0%,10%);
opacity:1}
12% {
-webkit-transform:rotate(0)scale(1.5)translate(0%,-10%);
opacity:1}
16% {
-webkit-transform:rotate(0)scale(1)translate(0%,0%);
opacity:1}
20% {
-webkit-transform:rotate(0deg)scale(1.5)translate(10%,0%);
opacity:1}
22% {
-webkit-transform:rotate(0deg)scale(1.5)translate(10%,0%);
opacity:0}
}
.photo:nth-child(1) {animation-delay: 48s;background: url('https://pic.imgdb.cn/item/6503721c661c6c8e5439d568.jpg') no-repeat center/cover;}
.photo:nth-child(2) {animation-delay: 36s;background: url('https://pic.imgdb.cn/item/65037253661c6c8e5439ed18.jpg') no-repeat center/cover;}
.photo:nth-child(3) {animation-delay: 24s;background: url('https://pic.imgdb.cn/item/6503726c661c6c8e5439eed4.jpg') no-repeat center/cover;}
.photo:nth-child(4) {animation-delay: 12s;background: url('https://pic.imgdb.cn/item/65037284661c6c8e5439f0e4.jpg') no-repeat center/cover;}
.photo:nth-child(5) {animation-delay: 0s;background: url('https://pic.imgdb.cn/item/6503729c661c6c8e5439f34a.jpg') no-repeat center/cover;}

.stop .photo:nth-child(1){animation-play-state: paused;}
.stop .photo:nth-child(2){animation-play-state: paused;}
.stop .photo:nth-child(3){animation-play-state: paused;}
.stop .photo:nth-child(4){animation-play-state: paused;}
.stop .photo:nth-child(5){animation-play-state: paused;}
#prog { position: absolute; bottom: 85%;left: 4%; width: 300px; height: 2px; border: 0px solid lightblue; border-radius: 2px;background: linear-gradient(to right, #880000, #880000 var(--prg), #cccccc 0); color: #ffffff; --prg: 0%; --state: paused; z-index: 20;}
#prog::before, #prog::after { position: absolute; top: -30px; }
#prog::before { content: attr(data-cu); left: 10px; }
#prog::after { right: 10px; content: attr(data-du); }
#slider { position: absolute; width: 3px; height: 7px; background: snow; left: var(--prg); bottom: -2px;}
#btnplay { position: absolute; top: -32px; left: 45%; opacity: .9;font: normal 3em/0em serif;color:#ffffff; cursor: pointer; animation: rot 10s infinite linear var(--state); }
.gecikuang { position: absolute; left:0%;top: 86%; width: 100%; height: 50px; z-index: 4;}
#lrc { --motion: cover1; --tt: 5s; --state: paused; position: absolute; left: 50%; transform: translate(-50%); top: 0%; font: normal 2.8em 华文行楷; color:#ff0000; -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:#000080 ; filter: #ffffff; -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
#flyBox { --w: 220px; width: var(--w); overflow: hidden; color: #cccccc; position: absolute; left:30px;bottom: -30px; font-size: 14px; }
#flyBox div { word-break: keep-all; white-space: nowrap; animation: fly 10s linear infinite; background:#0000}
@keyframes fly { from { transform: translateX(100%); } to { transform: translateX(calc(0% - var(--w))); }}
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
@keyframes rot { to { transform: rotate(-1turn); } }
#papa:hover #fullscreen { display:block ;}
#fullscreen { position: absolute; top:4%; left:87%;color:#ffffff; filter:drop-shadow( 1px 1px 1px #000000);font: normal 2.2em华文新魏; opacity: 1; cursor: pointer; z-index: 100}
</style>
<div id="papa">
<div id="Img" >
<div class="photo" ></div>
<div class="photo" ></div>
<div class="photo" ></div>
<div class="photo" ></div>
<div class="photo" ></div>
</div>
<video id="vid" src="https://video-js.51miz.com/preview/video/00/00/17/26/V-172696-87B6AB1D.mp4" autoplay="autoplay" loop="loop" muted="muted" ></video>
<span id="fullscreen">全屏观赏</span>
<div class="gecikuang">
<div id="lrc" data-lrc="花潮lrc在线">花潮lrc在线</div>
</div>
    <div id="prog" data-cu="00:00" data-du="00:00" title="调节进度">
      <span id="btnplay" title="播放/暂停"><div id="bnt">❊</div></span>
<span id="slider"></span>
    <div id="flyBox"><div>《总以为来日方长》梅朵词：张凤敏 曲：王佳瑜</div></div>
</div>

</div>
<audio id="aud" src="https://i.mp3.wf/view.php/68b8136df6552a4c65e33f9abafffd9d.mp3" autoplay loop></audio>

<script>
(function() {
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 vid = document.querySelector('.vid');
let mState = () => aud.paused ? (lrc.style.setProperty('--state', 'paused'),prog.style.setProperty('--state', 'paused'), vid.pause()) : (lrc.style.setProperty('--state', 'running'),prog.style.setProperty('--state', 'running'), vid.play());
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);
});
let mKey = 0, mFlag = true;
(function() {
/*原始lrc歌词*/
let lrcStr = `《总以为来日方长》梅朵
词：张凤敏 曲：王佳瑜
LRC歌词制作：焱鑫磊
可有微弱烛光 引渡到过往
当时你的模样 肆意流淌
我站在风中回望 只有荒凉
一个人 等不到 天亮
原来大梦一场 还以为开场
可下一秒温度 不能同上
被吹到什么方向 尚且迷茫
两个人 怎么说 久长
我们不慌不忙 总以为来日方长
我们等待花开 却忘了世事无常
手心的滚烫 后来一点点变凉
那些忙 那些谎 我体谅
我们不慌不忙 总以为来日方长
我们憧憬瞻望 却难敌世事无常
眼底的光芒 后来一层层消亡
这时光 太会忘 我投降
原来大梦一场 还以为开场
可下一秒温度 不能同上
被吹到什么方向 尚且迷茫
两个人 怎么说 久长
我们不慌不忙 总以为来日方长
我们等待花开 却忘了世事无常
手心的滚烫 后来一点点变凉
那些忙 那些谎 我体谅
我们不慌不忙 总以为来日方长
我们憧憬瞻望 却难敌世事无常
眼底的光芒 后来一层层消亡
这时光 太会忘 我投降
我们不慌不忙 总以为来日方长
我们等待花开 却忘了世事无常
手心的滚烫 后来一点点变凉
那些忙 那些谎 我体谅
我们不慌不忙 总以为来日方长
我们憧憬瞻望 却难敌世事无常
眼底的光芒 后来一层层消亡
这时光 太会忘 我投降
眼底的光芒 后来一层层消亡
这时光 太会忘 我投降

`;

/*变量 ：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); /*获得歌词数组*/
})();






var image = document.getElementById("Img"),
    button = document.getElementById("bnt");
    if (image && button) {
    button.onclick = function() {
      if (this.value == '') {
         image.classList.remove('stop');
            this.value = '.';
      } else {
            image.classList.add('stop');
            this.value = '';
      }
    };
}

let fs = true;
      fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出全屏',papa.requestFullscreen()) : (fullscreen.innerText = '全屏观赏', document.exitFullscreen());
                fs = !fs;
      };       
btnplay.onclick = (e) => { e.stopPropagation(); aud.paused ? aud.play() : aud.pause(); }
prog.onclick = (e) => aud.currentTime = e.offsetX * aud.duration / prog.offsetWidth;
})();
setInterval( () => { aud.paused ? vid.pause() : vid.play(); },100);
</script>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

红影 发表于 2023-9-15 10:15

又看到焱鑫磊带来的那么多美人儿了，真养眼。欣赏焱鑫磊好帖{:4_199:}

红影 发表于 2023-9-15 10:16

唯一的小瑕疵熊猫的logo还在，能去掉才好，省的影响欣赏美人儿{:4_173:}

红影 发表于 2023-9-15 10:18

这首歌也好听，我们都以为来日方长，其实世事无常。该享受就好好享受这个人世{:4_187:}

焱鑫磊 发表于 2023-9-15 10:31

红影 发表于 2023-9-15 10:15
又看到焱鑫磊带来的那么多美人儿了，真养眼。欣赏焱鑫磊好帖

美人帖！问候红影美女。{:4_187:}

焱鑫磊 发表于 2023-9-15 10:33

红影 发表于 2023-9-15 10:16
唯一的小瑕疵熊猫的logo还在，能去掉才好，省的影响欣赏美人儿

还是借用一个背景图吧！{:4_187:}

焱鑫磊 发表于 2023-9-15 10:34

红影 发表于 2023-9-15 10:18
这首歌也好听，我们都以为来日方长，其实世事无常。该享受就好好享受这个人世

世事无常！{:4_181:}

红影 发表于 2023-9-15 19:23

焱鑫磊 发表于 2023-9-15 10:31
美人帖！问候红影美女。

问好焱鑫磊，晚上好{:4_187:}

红影 发表于 2023-9-15 19:28

焱鑫磊 发表于 2023-9-15 10:33
还是借用一个背景图吧！

这个背景图也很漂亮。其实原来的视频效果也挺好的，移掉logo也挺容易的{:4_173:}

红影 发表于 2023-9-15 19:42

焱鑫磊 发表于 2023-9-15 10:34
世事无常！

是啊，人生很短。

查看完整版本: 《总以为来日方长》梅朵