克隆亚伦老师代码，试帖《小鲜肉》 — 云飞儿 - 音乐沙龙 - 花潮论坛

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

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

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

<style>
#papa {
margin: 0px -310px;
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://upfile.mp3.wf/view.php/c0f9f3a37ed48633f2bfff220e1c3bcc.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>

<DIV style="HEIGHT: 50px">

亦是金 发表于 2025-2-21 15:07

@红影管理，删除前一个帖子“克隆亚伦老师代码，试帖《小鲜肉》 — 云飞儿”帖子，另外把我的两个“试帖”自留地也删除。谢谢了！{:4_187:}

红影发表于 2025-2-21 17:00

亦是金发表于 2025-2-21 15:07
@红影管理，删除前一个帖子“克隆亚伦老师代码，试帖《小鲜肉》 — 云飞儿”帖子，另外把我的两个“试 ...

嗯嗯，已经把那几个都删完了{:4_173:}

红影发表于 2025-2-21 17:03

这么多淡入淡出的视频轮播，这个制作真漂亮，这么多小鲜肉呢{:4_173:}

红影发表于 2025-2-21 17:03

欣赏亦是金老师精美制作{:4_187:}

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

红影发表于 2025-2-21 17:00
嗯嗯，已经把那几个都删完了

谢谢红影管理！辛苦了！{:4_187:}

亦是金 发表于 2025-2-21 17:29

红影发表于 2025-2-21 17:03
这么多淡入淡出的视频轮播，这个制作真漂亮，这么多小鲜肉呢

我只是克隆亚伦老师的代码，只要更换视频；歌曲；歌词就可以了！谢谢喜欢！{:4_187:}

亦是金 发表于 2025-2-21 17:30

红影发表于 2025-2-21 17:03
欣赏亦是金老师精美制作

谢谢欣赏夸奖！{:4_204:}

红影发表于 2025-2-21 22:22

亦是金发表于 2025-2-21 17:24
谢谢红影管理！辛苦了！

不客气啊，举手之劳{:4_173:}

红影发表于 2025-2-21 22:24

亦是金发表于 2025-2-21 17:29
我只是克隆亚伦老师的代码，只要更换视频；歌曲；歌词就可以了！谢谢喜欢！

做歌词找视频也不容易呢，辛苦了{:4_187:}

红影发表于 2025-2-21 22:24

亦是金发表于 2025-2-21 17:30
谢谢欣赏夸奖！

不客气啊，问好亦是金老师，周末快乐{:4_187:}

小辣椒 发表于 2025-2-21 22:39

前辈晚上好，这么多漂亮的视频做转换背景，很漂亮哦{:4_199:}

小辣椒 发表于 2025-2-21 22:40

第一次听这歌，还有杀猪刀的{:4_170:}

小辣椒 发表于 2025-2-21 22:41

感谢精彩的分享{:4_187:}

亦是金 发表于 2025-2-22 11:01

红影发表于 2025-2-21 22:22
不客气啊，举手之劳

谢谢了{:4_204:}

亦是金 发表于 2025-2-22 11:03

红影发表于 2025-2-21 22:24
做歌词找视频也不容易呢，辛苦了

有现成的代码套用，找这些不难{:4_196:}

亦是金 发表于 2025-2-22 11:04

红影发表于 2025-2-21 22:24
不客气啊，问好亦是金老师，周末快乐

问好红影！周末愉快！{:4_187:}

红影发表于 2025-2-22 11:04

亦是金发表于 2025-2-22 11:01
谢谢了

不客气啊，问好亦是金老师{:4_187:}

亦是金 发表于 2025-2-22 11:05

小辣椒发表于 2025-2-21 22:39
前辈晚上好，这么多漂亮的视频做转换背景，很漂亮哦

问好小辣椒！{:4_187:}

红影发表于 2025-2-22 11:05

亦是金发表于 2025-2-22 11:03
有现成的代码套用，找这些不难

还有很多是你自己加的啊，比如摇摆字{:4_187:}

页: [1] 2

花潮论坛's Archiver

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

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