论坛 › 人机音画视频 › 妈妈的话-龚爽

万顷湖 发表于 2026-8-8 15:48

妈妈的话-龚爽

<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_10211">
<br /><br /><style>
#papa { margin: 100px 0 0 calc(50% - 481px);width: 1200px; height: 680px; box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 6px #880000;position: relative; z-index: 1; display: grid; place-items: center; background:linear-gra**nt(80deg, #000080, #003300, #ff0000, #00f000)no-repeat center/cover; overflow: hidden; }

#pbpb {width: 100%; height: 100%;z-index: 1;
position: absolute;
}
.photo {width: 33.4%; height: 100%;z-index: 1;
position: absolute;box-shadow: 0px 0px 0px 2px #000000;
top:-28px; left:0px;filter:contrast(120%)brightness(100%);
opacity: 0;
animation-name: round ;animation-duration: 48s;
               animation-iteration-count: infinite;
                animation-timing-function: linear;
}

@keyframes round{0% {opacity: 1;transform:rotate(180deg)skew(20deg,20deg)scale(.5);}
6% {opacity: 1;transform:translate3d(0px,40px,0px)skew(40deg,-40deg)scale(.8)}
10% {opacity: 1;transform:translate3d(0px,0px,0px)scale(1)}
20% {opacity: 0;transform:translate3d(0px,0px,0px)scale(1)}

}
.photo:nth-child(8) {background:url(https://cccimg.com/view.php/9ad8350d3aedf5045633f2ae32c509b9.jpg)no-repeat center/cover;
animation-delay: 42s;
}
.photo:nth-child(7) {background:url(https://cccimg.com/view.php/90e9e297c7163269203502daed560de1.jpg)no-repeat center/cover;
animation-delay: 36s;
}
.photo:nth-child(6) {background:url(https://cccimg.com/view.php/dff92cba9ca93de1a2a48333d249a421.jpg)no-repeat center/cover;
animation-delay: 30s;
}
.photo:nth-child(5) {background:url(https://cccimg.com/view.php/e6c00a45027749e36eb29fafe767d7f9.jpg)no-repeat center/cover;
animation-delay: 24s;
}
.photo:nth-child(4) {background:url(https://cccimg.com/view.php/90e9e297c7163269203502daed560de1.jpg)no-repeat center/cover;
animation-delay: 18s;
}
.photo:nth-child(3) {background:url(https://cccimg.com/view.php/90e9e297c7163269203502daed560de1.jpg)no-repeat center/cover;
animation-delay: 12s;
}
.photo:nth-child(2) {background:url(https://cccimg.com/view.php/dff92cba9ca93de1a2a48333d249a421.jpg)no-repeat center/cover;
animation-delay: 6s;
}
.photo:nth-child(1) {background:url(https://cccimg.com/view.php/e6c00a45027749e36eb29fafe767d7f9.jpg)no-repeat center/cover;
animation-delay: 0s;
}
.stop .photo:nth-child(8) {
animation-delay: 42s;animation-play-state: paused;
}
.stop .photo:nth-child(7){
animation-delay: 36s;animation-play-state: paused;
}
.stop .photo:nth-child(6){
animation-delay: 30s;animation-play-state: paused;
}
.stop .photo:nth-child(5){
animation-delay: 24s;animation-play-state: paused;
}
.stop .photo:nth-child(4){
animation-delay: 18s;animation-play-state: paused;
}
.stop .photo:nth-child(3){
animation-delay: 12s;animation-play-state: paused;
}
.stop .photo:nth-child(2) {
animation-delay: 6s;animation-play-state: paused;
}
.stop .photo:nth-child(1) {
animation-delay: 0s;animation-play-state: paused;
}
#prog { position: absolute; bottom: 85%;left: 4%; width: 300px; height: 2px; border: 0px solid lightblue; border-radius: 2px;background: linear-gra**nt(to right, #880000, #880000 var(--prg), #cccccc 0); color: #ffffff; --prg: 0%; --state: paused; z-index: 20; --play: 0; --pause: 1; --bd: black; --sd: black;}
#prog::before, #prog::after { position: absolute; top: -30px; }
#prog::before { content: attr(data-cu); left: 10px; }
#prog::after { right: 10px; content: attr(data-du); }
#slider { position: absolute; width: 3px; height: 7px; background: snow; left: var(--prg); bottom: -2px;}

#btnplay {
      position: absolute;
      width: 40px;
      height: 40px;
top:-45px; left:130px;
      border: 0px solid var(--bd);
      border-radius: 0%;
      box-shadow: 0 0 0px var(--sd);
      transition: .7s;
      cursor: pointer;
      display: grid;
      place-items: center;
      
}
#btnplay::before, #btnplay::after {
      position: absolute;
      content: '';
      border-style: solid;
      border-color:#ffffff ;
      transition: .4s;
}
#btnplay::before {
      width: 0;
      height: 0;
      left: 15px;
      border-width: 10px 13px;
      border-color: transparent transparent transparent #ffffff;
      opacity: var(--play);
}
#btnplay::after {
      width: 3px;
      height: 18px;
      border-width: 0 5px 0 5px;
      opacity: var(--pause);
}



#lrc {--state: paused;
      --motion: cover2;
      --tt: 2s;
      --bg:#ff0000;
      position: absolute;z-index: 6;
      left: 52%;
      transform: translate(-50%);
      top: 85%;
      font:normal 3em 华文新魏;
      font-weight:200;
      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: 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);}
#flyBox { --w: 220px; width: var(--w); overflow: hidden; color: #cccccc; position: absolute; left:30px;bottom: -30px; font-size: 20px; }
#flyBox div { word-break: keep-all; white-space: nowrap; animation: fly 10s linear infinite; background:#0000}
@keyframes fly { from { transform: translateX(100%); } to { transform: translateX(calc(0% - var(--w))); }}
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
@keyframes rot { to { transform: rotate(-1turn); } }
#papa:hover #fullscreen { display:block ;}
#fullscreen { position: absolute; top:5%; left:83%;color:#ffffff; filter:drop-shadow( 1px 1px 1px #000000);font: normal 2.2em华文新魏; opacity: 1; cursor: pointer; z-index: 100}
</style>
<div id="papa">
<div id="Img">
<div id="pbpb" style="position: absolute;LEFT:0%; height: 100%;"><divclass='photo '></div><divclass='photo '></div><divclass='photo '></div><divclass='photo '></div><divclass='photo '></div><divclass='photo '></div><divclass='photo '></div><divclass='photo '></div>
</div>

<div id="pbpb" style="position: absolute;LEFT:33.4%;height: 100%;"><divclass='photo '></div><divclass='photo '></div><divclass='photo '></div><divclass='photo '></div><divclass='photo '></div><divclass='photo '></div><divclass='photo '></div><divclass='photo '></div></div>
<div id="pbpb" style="position: absolute;LEFT:66.8%; height: 100%;"><divclass='photo '></div><divclass='photo '></div><divclass='photo '></div><divclass='photo '></div><divclass='photo '></div><divclass='photo '></div><divclass='photo '></div><divclass='photo '></div></div>
</div>
<div id="main" >
<div id="stars"></div>
</div>

<span id="fullscreen">全屏观赏</span>

<div id="lrc" data-lrc="花潮论坛"></div>

<div id="prog" data-cu="00:00" data-du="00:00" title="调节进度">
      <span id="btnplay" title="播放/暂停"></span>
<span id="slider"></span>
    <div id="flyBox"><div>花潮论坛</div></div>
</div>

</div>
<audio id="aud" src="https://cccimg.com/view.php/2dfad2cda832149f45f2fb81b67b0658.mp3" autoplay loop></audio>

<script>
(function() {
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 vid = document.querySelector('.vid');
let mState = () => aud.paused ? (lrc.style.setProperty('--state', 'paused'),prog.style.setProperty('--state', 'paused'), vid.pause()) : (lrc.style.setProperty('--state', 'running'),prog.style.setProperty('--state', 'running'), vid.play());
aud.addEventListener('timeupdate', () => {
      prog.style.setProperty('--prg', aud.currentTime / aud.duration * 100 + '%');
      prog.dataset.cu = toMin(aud.currentTime);
      prog.dataset.du = toMin(aud.duration);
var imagee= document.getElementById("Img");
let mState = () => aud.paused ? (btnplay.style.setProperty('--play', '1'),imagee.classList.add('stop') ,btnplay.style.setProperty('--pause', '0')) : (btnplay.style.setProperty('--play', '0'), imagee.classList.remove('stop'),btnplay.style.setProperty('--pause', '1'));
btnplay.onclick = (e) => {e.stopPropagation(); aud.paused ? aud.play() : aud.pause();}
aud.addEventListener('play', mState,false);
aud.addEventListener('pause', mState,false);
prog.onclick = (e) => aud.currentTime = e.offsetX * aud.duration / prog.offsetWidth;
});

let mKey = 0, mFlag = true;
(function() {
/*原始lrc歌词*/
let lrcStr = `花潮论坛
妈妈的话 - 龚爽
词：李玉国
曲：李沧桑
记得我第一次远离家
妈妈送别时说了啥
出门在外不要怕吃苦
忘不了你语重心长的话
忘不了你躲闪的泪花
啊妈妈啊妈妈
忘不了你躲闪的泪花
你望我勤快被人夸
要与同事和睦相处不孤寡
你盼我出息有人爱
自强自立早成家
有时候我忙碌晚回家
妈妈电话里说了啥
出门在外不要太辛苦
那是我听到最暖心的话
那是妈妈欣慰的把我夸
啊妈妈啊妈妈
那是你欣慰的把我夸
我知道儿行千里
儿行千里母担忧
我知道
您的爱陪我自信走天涯
遇事拿得起放得下
我知道儿行千里
儿行千里母担忧
我知道
您的爱陪我自信走天涯
遇事拿得起放得下
自信走天涯
`;

/*变量 ：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 mState = () => aud.paused ? (lrc.style.setProperty('--state','paused'),btnplay.style.animationPlayState = 'paused') : (lrc.style.setProperty('--state','running'),btnplay.style.animationPlayState = 'running');
/*函数 ：模拟显示同步歌词*/
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;
}



/*监听播放进度*/
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); /*获得歌词数组*/
})();

let fs = true;
      fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出全屏',papa.requestFullscreen()) : (fullscreen.innerText = '全屏观赏', document.exitFullscreen());
                fs = !fs;
      };       

})();

stars.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>stars.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>stars.style.animationPlayState = 'paused');
</script>
<style>
#main {
position: relative;
overflow: hidden;
width: 100%;
z-index: 2;
min-height: 98vh;
perspective: 240px;}

#stars {
position: absolute;z-index: 2;
top: 50%;
left: 50%;

width: 4px;
height: 4px;
border-radius:50%;
box-shadow: -238px 108px #00ff00, 193px -376px #00ff00, -1264px -60px #00ff00,145px -443px #fff000, -1440px 37px #00ff00, 262px -136px #fff000, 212px 219px #fff000, 319px 223px #fff000, 1246px -51px #c9c9c9,308px 26px #fff000, 147px 229px #00ff00, -1041px 450px #00ff00, 671px 86px white, -921px 234px #fff000, -957px 242px #00ff00, 1249px -285px #ff0000, 741px 434px #00ff00, -1030px 330px #00ff00, 311px -475px #fcfcfc, -413px -105px #ff0000, 868px -435px #f7f7f7, -790px 289px #ff0000, 202px 427px #fcfcfc, -22px -158px #ff0000, -1294px -297px #cccccc, -63px 200px #ff0000, -592px -86px #f7f7f7, -732px 366px white, -1426px -262px #e8e8e8, 475px -400px #ff0000, -1442px -153px #00ff00, 1124px -219px #ededed, 701px 257px #ff0000, 36px -179px #ff0000, -937px 480px #f7f7f7, -267px -418px #00ff00, 1467px 127px #ff0000, -1128px 274px #ff0000, -180px 430px #e0e0e0,180px 430px #ffffff, 624px 275px #ff0000, -473px 150px #e6e6e6, -537px -348px #d4d4d4, 410px 455px #ff0000, 497px -29px #cccccc, 416px -370px whitesmoke, 977px 82px #c2c2c2, 1209px -222px #f0f0f0, 637px 360px #fcfcfc,-416px 370px whitesmoke, -1049px 409px white, 959px 407px #ff0000, -1153px -168px #dedede, -437px -216px #dbdbdb, -572px 420px #ff0000, -228px 78px #ff0000, -925px 452px #ccffcc, 244px 30px #ff0000, 453px -336px #fff000, -453px -336px #ff0000, 993px -63px #c2c2c2, 670px -343px #d9d9d9, -1088px 344px #00ff00, -170px -153px #fff000, 987px -208px #00ff00, 596px 166px #fcfcfc, -1362px -28px #ff0000, 1291px -106px #e3e3e3, -1128px 169px #ededed, 1056px 367px #ebebeb, 261px -128px #ff0000, 1017px 401px #cccccc, 1381px 245px #e3e3e3, 536px -113px #fafafa, -92px -217px #e3e3e3, 1481px 268px #00ff00, 832px -345px #ff0090, -863px 138px #00ff00, -997px -412px #e3e3e3, -330px -260px #00ff00, 691px -39px #fcfcfc, -468px -135px #ff0000, -535px 405px #e8e8e8, -1289px -284px #e3e3e3, 823px -225px #00ff00, -1172px -348px white, 505px -319px #ff0000, 94px -45px #ededed, -687px -64px #c7c7c7, -1133px -456px #e2f2f2, 1357px 135px #e0e0e0, -919px -249px whitesmoke, 206px 32px white, 1453px -338px #cccccc, -764px 83px #e8e8e8, 726px 85px #00f000, 205px 103px #e3e3e3, 85px 116px #d1d1d1, 1104px -121px #00ff00,-1104px 121px #fffcfc, 649px -304px #dbdbdb, -313px 313px whitesmoke, 491px -419px #c9c9c9, -1405px 397px #cfcfcf, 30px -81px #ff0000;130px -130px #eeeeee,1130px -230px #00ff00,-1000px -1550px 30px 0px #ff0000,500px -350px 100px 0px #00ff00;
animation: flyy 2s linear infinite;
transform-style: preserve-3d;
}

#stars:before{
content: "";
position: absolute;
width: inherit;
height: inherit;
box-shadow: inherit;
}

#stars:after {
content: "";
position: absolute;
width: inherit;
height: inherit;
box-shadow: inherit;
}

#stars:before {
transform: translateZ(-300px);
animation: fade1 2s linear infinite;
}

#stars:after {
transform: translateZ(-600px);
animation: fade2 2s linear infinite;
}

@keyframes flyy {
from {
    transform: translateZ(0px);
}
to {
    transform: translateZ(300px);
}
}
@keyframes fade1 {
from {
    opacity: 0.9;
}
to {
    opacity: 1;
}
}
@keyframes fade2 {
from {
    opacity: 0.2;
}
to {
    opacity: 0.9;
}
}
</style>
</td></tr></table>

梦江南 发表于 2026-8-8 18:03

漂亮的动画特效，精美的制作，欣赏点赞！{:4_187:}

梦江南 发表于 2026-8-8 18:03

好可爱的小和尚。{:4_173:}

梦江南 发表于 2026-8-8 18:04

问好万老师！{:4_204:}

万顷湖 发表于 2026-8-8 18:58

梦江南 发表于 2026-8-8 18:04
问好万老师！

大热天，老人不甘寂寞，又在班门弄回斧，请安梦江南，谢谢鼓励。

梦油 发表于 2026-8-8 19:54

精彩制作，无与伦比。{:5_116:}

红影 发表于 2026-8-8 21:41

歌曲好听，制作漂亮。很感人的歌曲。
欣赏万顷湖老师好帖{:4_187:}

万顷湖 发表于 2026-8-9 07:05

梦油 发表于 2026-8-8 19:54
精彩制作，无与伦比。

大热天，不甘寂寞，又在班门弄斧，问候梦油，谢谢鼓励。

万顷湖 发表于 2026-8-9 07:08

红影 发表于 2026-8-8 21:41
歌曲好听，制作漂亮。很感人的歌曲。
欣赏万顷湖老师好帖

大热天，久静思动，又在班门弄斧，问候红影，谢谢鼓励。

红影 发表于 2026-8-9 10:06

万顷湖 发表于 2026-8-9 07:08
大热天，久静思动，又在班门弄斧，问候红影，谢谢鼓励。

太谦虚了，问好万顷湖，周日快乐{:4_187:}

梦油 发表于 2026-8-9 16:49

万顷湖 发表于 2026-8-9 07:05
大热天，不甘寂寞，又在班门弄斧，问候梦油，谢谢鼓励。

你的制作十分精巧。

查看完整版本: 妈妈的话-龚爽