不如见一面（春晚独唱版）

亚伦影音工作室 发表于 2024-2-18 21:01

本帖最后由亚伦影音工作室于 2024-4-16 09:44 编辑 <br /><br /><style>
#papa{position: relative;width:1164px;height:620px;background: linear-gradient(0deg, #031EC1 75%,#031EC1 75%);display: grid;place-items: center;overflow:hidden;margin-top:0px;margin-left: -300px;border:10pxdouble #ffffff;}
#prog { position: absolute; bottom: 5%; width: 280px; height: 12px; background: linear-gradient(to right, snow var(--prg), gray 0) repeat-x 0 50% / 100% 1px;left:5%; color: snow; display: grid; place-items: center; --prg: 0%; --state: paused; z-index: 999;cursor: pointer;}
#prog::before, #prog::after { position: absolute; top: -30px; }
#prog::before { content: attr(data-cu); left: 0; }
#prog::after { right: 0; content: attr(data-du); }
#slider { position: absolute; font: normal 1.5em/0em serif;color:#ffffff; cursor: pointer; background: snow; left: var(--prg); }
#btnplay { position: absolute;bottom: 35px; font: normal 3em/0em serif;color:#ffffff; cursor: pointer; animation: rot 6s infinite linear var(--state); }
@keyframes rot { to { transform: rotate(1turn); } }

#lrc{left: 30%;top: 80%;}#lrcc {left: 90%;transform: translate(-102%);top: 90%;}
#lrc,#lrcc{--state: paused;--motion: cover2;--tt: 2s;--bg:linear-gradient(89deg, #EE0000 12%,#078504 35%,#060344 65%,#DE0000 90%);border:0px solid black;position: absolute;z-index: 6;font:normal 2.5em 华文新魏;color: #222222;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 -1px 0);;}
#lrcc::before,#lrc::before {position: absolute;content: attr(data-lrc);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);}}
#bk{position:absolute;width:100%;height:100%;background:url(https://www.kumeiwp.com/sub/filestores/2022/11/21/8cc174354eb646c775ac6beaa058a5b3.png)0 0/100% 100%;animation: bbs 6s infinite linear ;z-index: 4; }
@keyframes bbs {
   0% { filter:hue-rotate(360deg)contrast(180%)brightness(100%); }
}
.zt{list-style: none;margin-left: 0px;width:600px;height:400px;position:absolute;z-index: 6;overflow:hidden;}
.zt e{width: 100%;height: 600px;position:relative;animation: myfirst 40s 1 ;line-height: 600px;text-align: center;font: normal 3.5em 黑体;color: rgb(255, 255, 255,0);transition: all .5s;filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px 0);}
@keyframes myfirst {0% {opacity: 0;color:#000000;transform:scale(0)}10% {opacity: 1;color: #800000;transform:scale(1)}15% {opacity: 1;color: #800000;transform:scale(1)}50%{opacity: 0;color: rgb(255, 255, 255,0);transform:scale(1) }}

#vid {position: absolute;width: 100%;height: 100%;top:0px;object-fit: cover;pointer-events: none;opacity: 0;}
</style>

<div id="papa">
<div id="bk"></div>
<div id="testImg" >
   <span class="演员"></span>
            <span class="演员"></span>
            <span class="演员"></span>
            <span class="演员"></span>
            <span class="演员"></span>
            <span class="演员"></span>
   </div>
<video id="vid" src="http://" autoplay="" loop="" muted=""></video>
<audio id="aud" src="https://bzgz.club/view.php/0befabcbf77ee47b8a4f427371358dcf.mp3" loop autoplay></audio>
<ul class="zt">
<e><div>不如见一面</div><br> <div style="zoom: .7" > 作词：海来阿木<br>作曲：海来阿木<br>演唱：海来阿木</div></e>
</ul>
<div id="prog" data-cu="00:00" data-du="00:00" title="调节进度">
<span id="btnplay" title="播放/暂停">❊</span>
      <span id="slider">✈</span>
</div>
<div id="lrc" data-lrc=""></div>
<div id="lrcc" data-lrc=""></div>
</div>
<span id="lrcStr" style="visibility: hidden;">
不如见一面（春晚独唱版）
作词：海来阿木
作曲：海来阿木
演唱：海来阿木
编曲：海来阿木、色特比且
录混：曲比阿且
男：
他们说提起我你沉默
常借着酒意分着对错
我不懂得你情深似海
你不懂得我思念成灾
女：
不如见一面
哪怕是一眼
这世间太多的难免亏欠
女（主唱）男（和声）：
你是我穿过思念的箭
女：
不如见一面
哪怕是一眼
女（主唱）男（和声）：
回首相濡以沫的那几年
不顾一切的你我从前
女：
都说靠时间遗忘的人
经不住见面再次寒暄
晚风轻轻地递着挂牵
我揪着心事不肯翻篇
男：
不如见一面
哪怕是一眼
这世间太多的难免亏欠
男（主唱）女（和声）：
你是我穿过思念的箭
男：
不如见一面
哪怕是一眼
男（主唱）女（和声）：
回首相濡以沫的那几年
不顾一切的你我从前
女：
不如见一面
哪怕是一眼
女（主唱）男（和声）：
这世间太多的难免亏欠
你是我穿过思念的箭
男：
不如见一面
哪怕是一眼
男（主唱）女（和声）：
回首相濡以沫的那几年
不顾一切的你我从前
合：
好在我记牢了你的容颜
凭借着回忆与你相见
</span>
<script >
(function() {
/*变量：mKey - 当前歌词索引；averAdd ：平均值补偿*/
let mKey = 0,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 arr="";
   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) => {
   lrca=lrcAr;
   lrcAr.length==mKey+1?lrcb="":lrcb=lrcAr;//判断最后一句歌词
   let Y=String(mKey/2).indexOf(".");
   if (Y == -1)
{
   0==mKey&&(lrc.innerHTML=lrca);
   lrc.dataset.lrc = lrca;
lrcc.innerHTML = lrcb;
   lrcc.dataset.lrc = "";
   lrc.style.setProperty('--motion', 'cover1');
   lrc.style.setProperty('--tt', time + 's');
   lrc.style.setProperty('--state', 'running');
lrcc.style.setProperty('--motion', 'cover2');
   }
else
{
   lrc.innerHTML = lrcb;
   lrcc.dataset.lrc = lrca;
   lrc.dataset.lrc = "";
lrcc.style.setProperty('--motion', 'cover1');
   lrcc.style.setProperty('--tt', time + 's');
   lrcc.style.setProperty('--state', 'running');
lrc.style.setProperty('--motion', 'cover2');
   }
   mKey += 1;
};
/*函数：处理当前歌词索引 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 mState = () => aud.paused?(lrc.style.setProperty("--state","paused"),lrcc.style.setProperty("--state","paused"),mplayer.style.animationPlayState="paused"):(lrc.style.setProperty("--state","running"),lrcc.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.innerHTML); /*获得歌词数组*/
})();
</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 = () => 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); });

prog.onclick = (e) => aud.currentTime = e.offsetX * aud.duration / prog.offsetWidth;
bk.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>bk.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>bk.style.animationPlayState = 'paused');

(function(){
var image = document.getElementById("testImg");
let mState = () => aud.paused ? (image.classList.add('stop')):(image.classList.remove('stop'));
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
})();

vid=document.querySelector('#vid');
btnplay.onclick = (e) => { e.stopPropagation(); aud.paused ? (aud.play(),vid.play()): (aud.pause(),vid.pause()); }

</script>
<style>
.演员 {
width: 100%;
height: 100%;
position: absolute;
z-index: 3;
top:0px; left:0px;
animation: spin 24s infinite linear;
   opacity: 0;
}
.演员:nth-of-type(1) {animation-delay: 20s;
   background: url('https://pic.imgdb.cn/item/64fd5599661c6c8e5429c0e2.jpg')no-repeat center/cover;
   }
.演员:nth-of-type(2) {animation-delay: 16s;
   background: url('https://pic.imgdb.cn/item/658c0a24c458853aef9d89ab.jpg')no-repeat center/cover;
   }
.演员:nth-of-type(3) {animation-delay: 12s;
   background: url('https://pic.imgdb.cn/item/658c09d6c458853aef9c646b.jpg')no-repeat center/cover;
   }
.演员:nth-of-type(4) {animation-delay: 8s;
   background: url('https://pic.imgdb.cn/item/64f93f7e661c6c8e54359206.jpg')no-repeat center/cover;
   }
.演员:nth-of-type(5) {animation-delay: 4s;
   background:url('https://pic.imgdb.cn/item/64e9fa3f661c6c8e544f1b3a.jpg')no-repeat center/cover;
   }
.演员:nth-of-type(6) {animation-delay: 0s;
   background: url('https://pic.imgdb.cn/item/64fd530c661c6c8e542948df.jpg')no-repeat center/cover;
   }
.stop .演员:nth-child(1),
.stop .演员:nth-child(2),
.stop .演员:nth-child(3),
.stop .演员:nth-child(4),
.stop .演员:nth-child(5),
.stop .演员:nth-child(6){animation-play-state: paused;}
@keyframes spin {
   0% { opacity: 0; }
   4% { opacity: 1; } 8% { opacity: 1; }22% { opacity: 0; }
}
</style>

小辣椒 发表于 2024-2-18 21:18

亚伦晚上好~，帖子画面转换很漂亮的，音乐没有听到

亚伦影音工作室 发表于 2024-2-18 21:20

小辣椒发表于 2024-2-18 21:18
亚伦晚上好~，帖子画面转换很漂亮的，音乐没有听到

地址有误，届时处理！

醉美水芙蓉 发表于 2024-2-18 21:27

醉美水芙蓉 发表于 2024-2-18 21:29

小辣椒 发表于 2024-2-18 21:32

亚伦影音工作室发表于 2024-2-18 21:20
地址有误，届时处理！

听到了，现在有了

红影发表于 2024-2-18 21:40

好漂亮的制作。欣赏亚伦老师好帖{:4_199:}

庶民发表于 2024-2-19 10:34

欣赏您的作品

老谟深虑 发表于 2024-2-19 15:27

好作品，欣赏点赞！

页: [1]

花潮论坛's Archiver

不如见一面（春晚独唱版）