亦是金 发表于 2025-2-21 14:24

学习亚伦老师代码，试帖《 小 鲜 肉 》 — 云飞儿

本帖最后由 亦是金 于 2025-2-21 14:25 编辑 <br /><br />
<div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_2229531">

<style>
#papa {
        margin: 50px -140px;
        width: 1250px;
        height: 750px;
        background:url(https://ysj147.s3-us-east-1.ossfiles.com/zzsc/png/wbj01.png) no-repeat center/100% 100%;
        position: relative;
        overflow: hidden;
        border-radius:2%;
        z-index: 12345;
}

#cndpt{
        margin: 0px 0px ;
        z-index: 10;
        mix-blend-mode: lighten;
        cursor: pointer;
        position:relative;
        width: 1200px;
        height: 700px;
        transform: rotatez(0deg)rotateX(0deg);
        background: url(yanhua01.gif)no-repeat center/100% 100%;
}

#enopg{
        position: relative;
        width: 1200px;
        height: 700px;
        background: url(https://ysj147.s3-us-east-1.ossfiles.com/zzsc/png/wbj01.png) no-repeat center/100% 100%;
        display:none;
}



#vid1{
        width: 1200px;
        height: 0px;
        z-index: 1;
        position:absolute;
        top:20px;
        left:20px;
        object-fit: cover;
        pointer-events: none;
}
.vid{
        width: 1200px;
        height: 700px;
        z-index: 2;
        position:absolute;
        top:25px;
        left:8px;
        border-radius: 20px;
        border: 2px solid #000;
        opacity: 0;
        object-fit: cover;
        pointer-events: none;
        animation: round 100s linear infinite ;
}
@keyframes round {
        0% {opacity: 0;}
        4% {opacity: 1;}
        10% {opacity: 1;}
        15% {opacity: 0;}
}

.vid:nth-child(1){animation-delay: 90s;}
.vid:nth-child(2){animation-delay: 80s;}
.vid:nth-child(3){animation-delay: 70s;}
.vid:nth-child(4) {animation-delay: 60s;}
.vid:nth-child(5) {animation-delay: 50s;}
.vid:nth-child(6){animation-delay: 40s;}
.vid:nth-child(7){animation-delay: 30s;}
.vid:nth-child(8){animation-delay: 20s;}
.vid:nth-child(9) {animation-delay: 10s;}
.vid:nth-child(10) {animation-delay: 0s;}

.stop .vid:nth-child(1),
.stop .vid:nth-child(2),
.stop .vid:nth-child(3),
.stop .vid:nth-child(4),
.stop .vid:nth-child(5),
.stop .vid:nth-child(6),
.stop .vid:nth-child(7),
.stop .vid:nth-child(8),
.stop .vid:nth-child(9),
.stop .vid:nth-child(10){animation-play-state: paused;}

#lrc {
      --state: paused;
      --motion: cover2;
      --tt: 2s;
      --bg: #880000;
      position: absolute;z-index: 6;
      left: 45%;
      transform: translate(-50%);
      top: 85%;
      font:normal 3em 华文新魏;
        color: #000;
      
      -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: 0%;}100% { width: 100%;}}
@keyframes cover2 { 0% { width: 0%;}100% { width: 100%;}}

</style>


<style type="text/css">

#baiBox {
      margin: auto;
      width: 700px;
      text-align: center;
      font-family:华文新魏;
      font-size: 2.5rem;
      font-weight: bold;
      color: #f46ff6;
      transform-origin: top;
      animation: yao 1.0s linear infinite alternate;
}

@keyframes yao {
      from{transform: perspective(800px) rotatex(30deg); }
      to { transform: perspective(800px) rotatex(-30deg); }
}



.tit { position: absolute;width: 500px;height: 50px;top: 50px;LEFT: -80px;z-index: 100;filter: drop-shadow(-1px 1px 1px #ffffff)drop-shadow(0px -1px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff) }
#tit:hover { color: green; }
/*标题位置 移动范围设置*/

</style>


<div id="papa">
<div id="cndpt">

<div id="baiBox"
<div class="tit">
<span style="color:#fb52f9;"><span style="font-size:42px;">《 小 鲜 肉 》</span>
<span style="color:#658cf0;"><span style="font-size:28px;">— 云飞儿</span></div>

</div>

<div style="position: absolute;width: 500px;height: 50px;top:660px;LEFT: 1000px;z-index: 100;filter: drop-shadow(-1px 1px 1px #e8f552)drop-shadow(0px -1px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)">
<p><span style="color:#ff0000;"><span style="font-family:华文隶书;"><span style="font-size:25px;">亦是金在线音乐</span></span></span></p></div>

<video id="vid1" src="https://video-qn.51miz.com/preview/video/00/00/13/28/V-132837-83C10220.mp" loop muted autoplay=""></video>

<div id="testImg">
<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/64/36/V-643609-7C880C45.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/vcg/video/preview/51miz42N1367115422.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/vcg/video/preview/51miz42N1191405603.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/vcg/video/preview/51miz42N1134096616.mp4" loop muted autoplay=""></video>

<video class="vid" src="https://video-qn.51miz.com/vcg/video/preview/51miz42N1584517799.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/vcg/video/preview/51miz42N1367167133.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/vcg/video/preview/51miz42N531761986.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/vcg/video/preview/51miz42N1294894931.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/vcg/video/preview/51miz42N900695222.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/60/61/V-zip-20231212dv_134-BB07D550.mp4" loop muted autoplay=""></video>

</div>

<div data-lrc="《 小 鲜 肉 》" id="lrc">《 小 鲜 肉 》 — 云飞儿</div>
</div>
<audio id="aud" src="https://ysj147.s3-us-east-1.ossfiles.com/zzsc/mp3/xiaoxianro.mp3" autoplay loop></audio>

<script >

(function() {
      const vids = document.querySelectorAll('.vid');
      var mState = () => {
         vids.forEach(vid => aud.paused ? vid.pause() : vid.play());
      };
      aud.onplaying = aud.onpause = () => mState();
      })();
varimgElement= document.getElementById('enopg');
cndpt.onclick = () => {aud.paused ? (aud.play(),imgElement .style.display = 'none',vid1.play()) : (aud.pause(),imgElement.style.display = 'block',vid1.pause())};
</script >
<script >
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());
</script >

<script >
(function() {
/*原始lrc歌词*/
let lrcStr = `《 小 鲜 肉 》 — 云飞儿
词曲: 陈 伟
编曲: 于秋实
演唱：云飞儿
歌词编辑：亦是金
. . . . . .
你的嘴角 三十度微笑
就连谷歌 也百度不到
比阳光闪耀 比春风逍遥
世界忽然变的更美妙
你的眼里 三千度火苗
让我的心 piapia的乱跳
青春永不老 世界都颠倒
气死岁月这把杀猪刀
你就是我的小鲜肉
怎么看你都看不够
一日不见就浑身难受
好象睡觉找不到枕头
你就是我的小鲜肉
总想陪在你的左右
不离不弃到天长地久
就象奥特曼和小怪兽
时间就象那多事的小偷
关键的时刻就把你带走
你还没笑够 我也看不够
藏着的情话还没说出口
每天我守望你来的路口
好象担心你离开了地球
我的小鲜肉 多想咬一口
拥有了你我再也无所求
你的嘴角 三十度微笑
就连谷歌 也百度不到
比阳光闪耀 比春风逍遥
世界忽然变的更美妙
你的眼里 三千度火苗
让我的心 piapia的乱跳
青春永不老 世界都颠倒
气死岁月这把杀猪刀
你就是我的小鲜肉
怎么看你都看不够
一日不见就浑身难受
好象睡觉找不到枕头
你就是我的小鲜肉
总想陪在你的左右
不离不弃到天长地久
就象奥特曼和小怪兽
你就是我的小鲜肉
怎么看你都看不够
一日不见就浑身难受
好象睡觉找不到枕头
你就是我的小鲜肉
总想陪在你的左右
不离不弃到天长地久
就象奥特曼和小怪兽
- 谢谢欣赏 -

`;

/*变量 ：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')) : (lrc.style.setProperty('--state','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>

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








liumang 发表于 2025-2-21 23:59

{:5_150:}{:5_150:}{:5_150:}

liumang 发表于 2025-2-22 00:00

这么多MP4连接转换，效果很好{:5_150:}

liumang 发表于 2025-2-22 00:00

感谢亦是金老师分享{:5_124:}
页: [1]
查看完整版本: 学习亚伦老师代码，试帖《 小 鲜 肉 》 — 云飞儿