论坛 › 欢乐水吧 › 跟着感觉走 (《飞驰人生2》电影新春乐曲)

亚伦影音工作室 发表于 2024-2-13 21:32

跟着感觉走 (《飞驰人生2》电影新春乐曲)

本帖最后由 亚伦影音工作室 于 2024-4-16 09:53 编辑 <br /><br /><style>
.papa { left: -302px; width: 1164px; height: 620px; border-radius: 6px; background: tan url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/6d059a1ee40019184a53757b7a4a70d0.jpeg') no-repeat center/cover; overflow: hidden; box-shadow: 4px 4px 8px #000; position: relative; }
.papa::before, .papa::after { position: absolute; content: ''; border-radius: inherit; background:url(http://chuangshicdn.data.mvbox.cn/album/22/03/14/22031417263445440463.gif)0 0/20%20%,url(https://img-baofun.zhhainiao.com/fs/0b71731d331c11675e54011ef4a390f6.jpg)no-repeat center/cover; width: 100%; height: 100%; transition: all 2s linear;z-index: 10;transform: translate(0%,0%) rotateY(0deg); }
.papa::before {clip-path: polygon(0 100%, 50% 100%, 50% 0, 0 0);}
.papa::after {clip-path: polygon(100% 100%, 50% 100%, 50% 0, 100% 0); }
.papa:hover::before { transform: translate(-50%,0%) rotateY(0deg) scale(1); }
.papa:hover::after { transform: translate(50%,0%) rotateY(0deg) scale(1); }
#player {margin:0 auto;position: absolute;top:5%; left:15%;width: 300px;height: 540px;cursor: pointer;animation: spin 10s infinite linear;}
.leaf {position: absolute;width: 40%;height: 40%;border-radius: 0px 100px;border:2px solid #ffffff;transform-origin: 120% 120%;}
.leaf:nth-of-type(1) {background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc_mobile/static/bd15302961dc0d095f882739d57aa4e9.jpg)no-repeat center/cover;transform: rotate(60deg)translateX(60px);}
.leaf:nth-of-type(2) {background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc_mobile/static/819c8817e3645efbe879d48c136d3aea.jpg)no-repeat center/cover;transform: rotate(120deg)translateX(60px);}
.leaf:nth-of-type(3) {background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc_mobile/static/64cfd5a038124ad321400699539dfcf3.jpg)no-repeat center/cover;transform: rotate(180deg)translateX(60px);}
.leaf:nth-of-type(4) {background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc_mobile/static/47bedf4a5d73029e5a84095d757cbbd1.jpg)no-repeat center/cover;transform: rotate(240deg)translateX(60px);}
.leaf:nth-of-type(5) {background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc_mobile/static/d9e9535d13b371230366ab4a935239e6.jpg)no-repeat center/cover;transform: rotate(300deg)translateX(60px);}
.leaf:nth-of-type(6) {background:url(https://mobile-img-baofun.zhhainiao.com/pcwallpaper_ugc_mobile/static/09341accfa84d0659de638e5e2f74c45.jpg)no-repeat center/cover;transform: rotateZ(360deg)translateX(60px);}
@keyframes spin {0% { transform: rotate(-360deg) ;}}

#lrc {--state: paused;--motion: cover2;--tt: 2s;--bg: linear-gradient(0deg, #880000, #880000, #880000);
position: absolute;z-index: 60;left: 50%; transform: translate(-50%);top: 20px;font:normal 3em 华文新魏; font-weight:400;
color: #000080;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: 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); } }
#mplayer { position: absolute; text-align: center; top: 520px; left: 40%;z-index: 60;color:#ffffff;}
#mplayer::before {position: absolute;content: attr(data-tt);left: 0;bottom: 25px;width: 100%;text-align-last: justify;}
#mprog { width: 240px; accent-color: darkgreen; outline: none; cursor: pointer; }
#btnplay { width: 60px; height: 60px; cursor: pointer; animation: rotating 6s infinite linear var(--state); }
@keyframes rotating { to { transform: rotate(360deg); } }
</style>


<div class="papa">
<div id="player">
<span class="leaf"></span>
<span class="leaf"></span>
<span class="leaf"></span>
<span class="leaf"></span>
<span class="leaf"></span>
<span class="leaf"></span>
</div>
<div id="mplayer" data-tt="00:00 00:00">
<img id="btnplay" src="https://pic.imgdb.cn/item/65b8fb93871b83018a66120a.png" title="播放/暂停" alt="" /><br>
<input id="mprog" type="range" min="0" max="100" step="any" value="0" title="调节进度" />
</div>
<div data-lrc="亚伦影音工作室" id="lrc" title="歌词显示">亚伦影音工作室</div>
        <audio id="aud" src="https://bzgz.club/view.php/b865e0db97a5383ca2b51b2a38a75426.mp3" autoplay="autoplay" loop="loop"></audio>
</div>

<script>
var mseek = false;
var mState = () => aud.paused ?
( btnplay.style.setProperty('--state', 'paused'), btnplay.title = '点击播放' ) :
( btnplay.style.setProperty('--state', 'running'), btnplay.title = '点击暂停' );
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;
}
aud.addEventListener('timeupdate', () => {
if (!mseek) mprog.value = aud.currentTime / aud.duration * mprog.max;
mplayer.dataset.tt = toMin(aud.currentTime) + ' ' + toMin(aud.duration);
});
aud.addEventListener('pause', () => mState());
aud.addEventListener('playing', () => mState());
mprog.onmousedown = () => mseek = true;
mprog.onmouseup = () => mseek = false;
mprog.onchange = () => aud.currentTime = aud.currentTime = mprog.value / mprog.max * aud.duration;
btnplay.onclick = () => aud.paused ? (aud.play(),paused) :( aud.pause(),running);
player.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>player.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>player.style.animationPlayState = 'paused');
</script>

<script >
(function() {
/*原始lrc歌词*/
let lrcStr = `跟着感觉走 (《飞驰人生2》电影新春乐曲)
词：陈家丽
曲：陈志远
编曲：JunHo何骏/李思
制作人：JunHo何骏
配唱制作人：李思/JunHo何骏
和声：李思
吉他/贝斯：JunHo何骏
人声录音：祝薇@野火春风/冯圣雅
录音棚：野火春风/圣大音乐
音频编辑：刘璇
混音：欧懿航 (Philip Au)
母带：欧懿航 (Philip Au)
混音/母带棚：2496 Top Music
监制：高航/大晶
沈腾/范丞丞/尹正/张本煜/孙艺洲
合：
跟着感觉走 让它带着我
梦想的事哪里都会有
范丞丞：
跟着感觉走 紧抓住梦的手
脚步越来越轻越来越快活
尹正：
尽情挥洒自己的笑容
希望就在不远处等着我
张本煜：
跟着感觉走 紧抓住梦的手
蓝天越来越近越来越温柔
孙艺洲：
心情就像风一样自由
沈腾：
突然发现一个完全不同的我
跟着感觉走
孙艺洲：
让它带着我
尹正：
希望就在不远处等着我
沈腾：
跟着感觉走
张本煜：
让它带着我
尹正/孙艺洲：
梦想的事哪里都会有 噢
尹正：
美梦成真 心想事成
范丞丞：
跟着感觉走
紧抓住梦的手
脚步越来越轻越来越快活
张本煜/孙艺洲：
尽情挥洒自己的笑容
孙艺洲：
希望就在不远处等着我
尹正：
跟着感觉走 紧抓住梦的手
孙艺洲：
蓝天越来越近越来越温柔
沈腾/张本煜：
心情就像风一样自由
突然发现一个完全不同的我
合：
跟着感觉走
让它带着我
希望就在不远处等着我
跟着感觉走
让它带着我
梦想的事哪里都会有
沈腾：
跟着感觉走
让它带着我
范丞丞：
希望就在不远处等着我
合：
跟着感觉走 让它带着我
梦想的事哪里都会有
跟着感觉走 让它带着我
梦想的事哪里都会有
飞驰 走你
尹正：
连牙已经蓝上了`;
/*变量 ：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); /*获得歌词数组*/
})();
</script>

红影 发表于 2024-2-13 21:48

鼠标上去，就能把上层的美女分成了两半{:4_173:}

红影 发表于 2024-2-13 21:49

这个漂亮把转动的花瓣美女藏在了下面。很巧妙的制作{:4_187:}
欣赏亚伦老师好帖{:4_199:}

梦油 发表于 2024-2-14 10:30

很久没听到这支歌曲了。

查看完整版本: 跟着感觉走 (《飞驰人生2》电影新春乐曲)