论坛 › 欢乐水吧 › 套用亚伦老师代码《妈妈我想你》

老谟深虑 发表于 2025-5-11 10:30

套用亚伦老师代码《妈妈我想你》

本帖最后由 老谟深虑 于 2025-5-11 17:48 编辑 <br /><br /><div style="position: absolute; left:0px;width:100%;margin-top:120px;">
<style>
#papa{
        width: 1286px;
        height: 720px;
        background:#800000 url('https://cccimg.com/view.php/5de0bd4813de6f7657d85fa0cf84d75e.jpg') no-repeat center/cover;
        box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000;
        position: relative;overflow: hidden;
        z-index: 12345;}
#ppm{position: absolute; width: 100%; height: 100%; opacity:1; z-index: 2;
background:url(https://pic1.imgdb.cn/item/67564aedd0e0a243d4e015f5.gif)no-repeat center/100% 100%; border-radius: 0px;mix-blend-mode: lighten;bottom: 0; left:0px;
}
#ppcm{ position: absolute;width: 100%; height: 100%; opacity:0;z-index: 2;bottom: 0;background:url(https://pic1.imgdb.cn/item/67564af4d0e0a243d4e015f6.png)no-repeat center/100% 100%;mix-blend-mode: difference;
}
#dh{ width: 100%; height: 100%; position: absolute;
z-index: 1;   
top:0px; left:0px;
animation: rod 2s linear infinite var(--state);}
@keyframes rod{        0% { background:radial-gradient(circle farthest-corner at center center, transparent 22%, #ff0000 100%); }
25% { background:radial-gradient(circle farthest-corner at center center, transparent 22%, #800000 100%); }
50% { background:radial-gradient(circle farthest-corner at center center, transparent 22%, #000080 100%); }
75% { background:radial-gradient(circle farthest-corner at center center, transparent 22%, #995918 100%); }
                100%{ background:radial-gradient(circle farthest-corner at center center, transparent 22%, #97349E 100%); }
}

#bfq{   
      position:absolute;
      width: 450px;
      height:350px;overflow: hidden;
      top:60%;background:#0000;
transform:scale(.6);
   left: 0%;z-index: 20;}
#cp{   
      position:absolute;
      width: 240px;border-radius: 50%;
      height:240px;animation: rotating 6s infinite linear var(--state);
      top:18%;background:repeating-radial-gradient(black, black 5px, #1C1C1C 6px, #1C1C1C 7px);
   cursor: pointer;
   left: 12%;z-index: 1;box-shadow:0px 0px 0px 1px #fff,0px 0px 0px 0px #880000;}
@keyframes rotating { to { transform: rotate(360deg); } }
.overlay {
content: '';
left: 50%;
top: 50%; transform: translate(-50%, -50%);
position: absolute;
width: 238px;
height: 238px;
background: linear-gradient(45deg, transparent, 40%, rgba(255,255,255,0.25), 60%, transparent);
border-radius: 50%;
}


.inner {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 140px;
height: 140px;
box-shadow:0px 0px 0px 1px #eee,0px 0px 0px 0px #eee;
background:#000 url('https://cccimg.com/view.php/98bdbaeb6a57278824a651eb414e2188.png') no-repeat center / cover;

border-radius: 50%;
}
.inner::before {
content: '';
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 15px;
height: 15px;
background: #ccc;
border-radius: 50%;
}
#cz {position: absolute;
      top:6%; left:45%;z-index: 2;
      width: 150px;background: url('https://pic1.imgdb.cn/item/6688e0dad9c307b7e9a7a3e1.png')no-repeat center/85%;
      height: 300px;
      cursor: pointer;
}

.pink { transform:rotate(5deg);transform-origin: 100% 0%;}
.purple {transform-origin: 80% 0%;margin: -4px -18px;transform:rotate(-9deg);}


#containe{width: 600px;
    height: 570px;list-style:none;
    overflow: hidden;
   position: relative;
left: 52%;
    z-index: 6;
    top: 6%;
    }
.lrcList{font: normal 20px 'FZYaoti', sans-serif;
    line-height: 50px;
      
    color: #fff; overflow: hidden;
    text-align: center;
    transition:all 0.2s;/* 过渡动画。实现歌词上下移动的动画 */
}
.lrcList li{list-style-type: none;
   display: block;
    transition:all 0.2s;
    height: 50px;
    opacity: 1;
}
.lrcList .current{
    transform: scale(1.4);
    color: #aaf650;
   font-weight: 650;
    opacity: 1;
}


#geci{--motion:cover2;--tt:2s;--state:paused;--bg:#880000;position:absolute;left: 50%; transform: translate(-50%);top: 86%;font:300 3.2em 华文隶书;color:#000;white-space:pre;-webkit-background-clip:text;filter:drop-shadow(#fff 0.8px 0 0)drop-shadow(#fff 0 0.8px 0)drop-shadow(#fff -0.8px 0 0) drop-shadow(#fff 0 -0.8px0);z-index: 6;display: none;}
#geci::before{position: absolute;content: attr(data-geci);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); } }
.hide{display: none;}
.klokgcbtn,.dhgcbtn{border-radius: 4px;position: relative;
color:#fff;background:#0000;box-shadow:0px 0px 0px 1px #fff;
padding: 4px 8px;
font-size: 12px;
border: none; z-index: 6;
cursor: pointer;margin: 20px 5px;left: 10%;
}
</style>

<divid="papa">
<div id="dh" ></div>
<button class="klokgcbtn"onclick="btn1()"title="klok歌词模式">klok歌词</button>
<button class="dhgcbtn" onclick="btn2()"title="多行歌词模式">多行歌词</button>
<div id="ppm"></div>
<div id="ppcm" ></div>
<div id="bfq">
<div id="cz"class="pink"></div>
<div id="cp"><div class="inner"></div><div class="overlay"></div></div>
</div>

<divid="containe">
<ul class="lrcList" id="lrcList">
            <li class="current"></li>
      </ul>
</div>


<div id="geci"></div>

<audioid="audio"   src="https://cccimg.com/view.php/bc43a63b634feca8755f3aba20435ecf.mp3" autoplay loop></audio>
</div>

<script>
letlrc = `妈妈我想你(慢四) - 汤潮
词：汤潮
曲：汤潮
我第一次睁开眼睛
看见的是你
我第一次哭泣
为我擦干的是你
我第一次跌倒时
搀扶的是你
我第一次喊妈妈呀
最开心的是你
我第一次离开家
送我的是你
我第一次有成绩
最激动的是你
我第一次绝望时
呼唤的是你
我第一次懂事时
夸奖的是你
妈妈呀妈妈呀我想你
没有你的夜里我好孤寂
我时常时常把你惦记
妈妈累了你就好好休息
妈妈呀妈妈呀我想你
你走后的天空一直下着雨
带上你心爱的油纸伞
妈妈你要照顾自己
妈妈呀妈妈呀我想你
是你让我鼓起了勇气
我们约好了吧
约好了吧
来生在这里团聚
我第一次离开家
送我的是你
我第一次有成绩
最激动的是你
我第一次绝望时
呼唤的是你
我第一次懂事时
夸奖的是你
妈妈呀妈妈呀我想你
没有你的夜里我好孤寂
我时常时常把你惦记
妈妈累了你就好好休息
妈妈呀妈妈呀我想你
你走后的天空一直下着雨
带上你心爱的油纸伞
妈妈你要照顾自己
妈妈呀妈妈呀我想你
是你让我鼓起了勇气
我们约好了吧
约好了吧
来生在这里团聚
我们约好了吗
约好了吗
妈妈我在这里
等你
`;

function parseLRC(LRC){
    let lines = LRC.split('\n'); // 把歌词转为数组
    let LRCArr = [];// 歌词数组
    // 遍历数组
    lines.forEach(item => {
       let parts = item.split("]"); //
      let timer =parts.slice(1).trim();//
      let obj = {
            time: parseTime(timer),
            word: parts.trim()==""?"":parts
      }
      // console.info( obj );
      LRCArr.push(obj);   
    });
    return LRCArr;
}
function parseTime(timer){
   let t = timer.split(":");
   let result = Number(t)*60 + Number(t);
   return result ;
}
function findIndex(){
    // 播放器当前时间
    let index = -1;
    let curTime = doms.audio.currentTime;
    for(let i=0; i<=LRCData.length-1 ; i++){
      if( curTime < LRCData.time ){
            index = i - 1;
            returnindex;
      }
    }
    // 找遍了，都没有歌词，说明播放完毕里，显示最后一句歌词。
    index = LRCData.length-1
    return index;
}

function createLrcList(lrc){
    // 避免多次操作 DOM。创建一个 DOM 片段，它不会显示，但是可以集中处理 DOM。
    let frag = document.createDocumentFragment();
    doms.lrcList.innerHTML = "";
    lrc.forEach(item=>{
      let li = document.createElement("li");
      li.innerHTML = item.word ;
      frag.appendChild(li);
    });
    doms.lrcList.appendChild(frag);
}

/*
设置歌词 ul 的偏移量
*/
function setOffset(index){
    let dis =-1*( index * liH + liH/2- conH/2 );// 位移距离
    doms.lrcList.style.transform = `translateY(${dis}px)`;
    console.info( dis );
}
/*
设置歌词高亮
*/
function setLight(index){
    let ul = doms.lrcList;
    let lis = ul.children;
    let cur = document.querySelector(".current");
    if( cur ){ // 如果存在
      cur.classList.remove("current");
    }
    lis.classList.add("current");
}


let doms = {
    audio:document.querySelector("audio"),
    lrcList:document.querySelector("#lrcList"),
    container:document.querySelector("#containe")
}
let LRCData = parseLRC(lrc);
createLrcList(LRCData);// 创造歌词 li
let conH = doms.container.clientHeight;// 容器高度
let liH = doms.lrcList.children.clientHeight;// li 高度
// 初始化歌词位置，让第一句歌词在歌词区中间
doms.lrcList.style.transform = `translateY(${-1*( liH/2- conH/2)}px)`;

doms.audio.addEventListener("timeupdate",function(){
    let index = findIndex();
    setLight(index);// 歌词位移
    setOffset(index); // 歌词高亮
});
function btn1() {
            
            document.getElementById('geci').style.display = 'block';
            document.getElementById('containe').style.display = 'none';
      }

      function btn2() {
         document.getElementById('geci').style.display = 'none';
            document.getElementById('containe').style.display = 'block';
      }

let mState = () => audio.paused ? (papa.style.setProperty('--state', 'paused'),ppcm.style.opacity= '1',ppm.style.opacity = '0'): (papa.style.setProperty('--state', 'running'),ppcm.style.opacity = '0',ppm.style.opacity = '1');
audio.addEventListener('play', () => mState());
audio.addEventListener('pause', () => mState());
cp.onclick =cz.onclick = () => audio.paused ? (audio.play(),cz.classList.remove('purple')) : (audio.pause(),cz.classList.add('purple'));

</script>
<script>
audio.addEventListener("seeked", myFunction)
audio.addEventListener("timeupdate", mylrc);
let mKey = 0, mFlag = true;

function 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));
      tmpAr.push(aver);
      tmpAr.forEach((item,key) => {
                ar = item > aver ? aver : item;
      });
      return ar;
};
function getLrcAr(str) {
      str = str.trim();
      let lines = [], lrcAr = [];
      let reg = /\[(\d{1,}:\d{1,}.\d{1,})\](.*)/g;
      if(!str.match(reg)) return;
      lines = str.replace(reg,'$1-{}-$2').split('\n');
      for(k = 0; k < lines.length; k ++) {
                lrcAr = [];
                for(j = 0; j < 3; j ++) {
                        let tmpAr = lines.split('-{}-');
                        lrcAr = j === 0 ? toSecs(tmpAr) : tmpAr;
                }
      }
      return lrcTime(lrcAr);
};
function toSecs (lrcTime){
      let reg = /\d{2,}/g;
      let ar = lrcTime.match(reg);
      return ar*60 + parseInt(ar) + parseInt((ar)/1000);
};

function showLrc(time){
      let name = mFlag ? 'cover1' : 'cover2';
      geci.innerHTML = lrcAr;
      geci.dataset.geci = lrcAr;
      geci.style.setProperty('--motion', name);
      geci.style.setProperty('--tt', time + 's');
      geci.style.setProperty('--state', 'running');
      mKey += 1;
      mFlag = !mFlag;
};

function myFunction(){
      for (j = 0; j < lrcAr.length; j++) {
                if (audio.currentTime <= lrcAr) {
                        mKey = j - 1;
                        break;
                }
      }
      if (mKey < 0) mKey = 0;
      if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
      let time = lrcAr - (audio.currentTime - lrcAr);
      showLrc(time);
};

function mylrc() {
      for (j = 0; j < lrcAr.length; j++) {
                if (audio.currentTime >= lrcAr) {
                        cKey = j;
                        if (mKey === j) showLrc(lrcAr);
                        else continue;
                }
      }
}

audio.addEventListener('play', playing,false);
audio.addEventListener('pause', playing,false);
function playing() {
geci.style.setProperty('--state', audio.paused ? 'paused' : 'running');
}
let lrcAr = getLrcAr(lrc);
</script>
</div>
<div style="height:960px;"></div>

梦油 发表于 2025-5-11 11:22

祝全世界的妈妈们节日快乐！

梦江南 发表于 2025-5-11 12:37

欣赏老师佳作、祝母亲节日快乐！

红影 发表于 2025-5-11 14:27

漂亮的制作，欣赏老谟深虑老师好帖，同祝天下的母亲节日快乐{:4_177:}

小辣椒 发表于 2025-5-11 15:33

老谟好，给你修改了居中代码，好像少一种歌词格式出来？

小辣椒 发表于 2025-5-11 15:33

欣赏老谟漂亮的制作{:4_187:}

小辣椒 发表于 2025-5-11 15:33

借美帖祝福所有母亲节日快乐！

世外桃源 发表于 2025-5-11 17:51

没有居中，太靠边了

世外桃源 发表于 2025-5-11 17:51

欣赏老师佳作

老谟深虑 发表于 2025-5-11 17:52

梦油 发表于 2025-5-11 11:22
祝全世界的妈妈们节日快乐！

         谢谢老师的支持，傍晚好！

老谟深虑 发表于 2025-5-11 17:53

梦江南 发表于 2025-5-11 12:37
欣赏老师佳作、祝母亲节日快乐！

         谢谢老师的欣赏和鼓励，母亲节快乐！

老谟深虑 发表于 2025-5-11 17:56

红影 发表于 2025-5-11 14:27
漂亮的制作，欣赏老谟深虑老师好帖，同祝天下的母亲节日快乐

          谢谢红影老师的美评和评精鼓励，套用亚伦老师的代码，在此感谢老师。

老谟深虑 发表于 2025-5-11 17:58

小辣椒 发表于 2025-5-11 15:33
老谟好，给你修改了居中代码，好像少一种歌词格式出来？

            谢谢您的帮助，我又修改了，歌词格式都出来了。

老谟深虑 发表于 2025-5-11 17:59

小辣椒 发表于 2025-5-11 15:33
欣赏老谟漂亮的制作

          再次感谢老师，祝您母亲节快乐！

老谟深虑 发表于 2025-5-11 18:01

世外桃源 发表于 2025-5-11 17:51
没有居中，太靠边了

         在我这里看，好像还可以。

老谟深虑 发表于 2025-5-11 18:02

世外桃源 发表于 2025-5-11 17:51
欣赏老师佳作

         谢谢老师的支持和鼓励，问好！

红影 发表于 2025-5-11 19:55

老谟深虑 发表于 2025-5-11 17:56
谢谢红影老师的美评和评精鼓励，套用亚伦老师的代码，在此感谢老师。

一起祝福母亲们的节日{:4_187:}

梦油 发表于 2025-5-12 14:26

老谟深虑 发表于 2025-5-11 17:52
谢谢老师的支持，傍晚好！

老谟朋友别客气。

小辣椒 发表于 2025-5-12 21:25

老谟深虑 发表于 2025-5-11 17:58
谢谢您的帮助，我又修改了，歌词格式都出来了。

老谟客气了，只是上次我给你居中修改好了，现在你又改回去了

https://file.uhsea.com/2505/0d26af32138b064c866497122c0c7fdaTJ.jpg

查看完整版本: 套用亚伦老师代码《妈妈我想你》