论坛 › 欢乐水吧 › 金久哲-忘恩负义

亚伦影音工作室 发表于 2024-10-23 20:48

金久哲-忘恩负义

本帖最后由 亚伦影音工作室 于 2025-5-18 19:52 编辑 <br /><br /><style>
#papa { margin: 160px 0 20px calc(50% - 721px); background:#000 url(https://pic.imgdb.cn/item/6718e509d29ded1a8ce3654d.jpg)no-repeat center/cover;width: 1280px; height: 720px;   box-shadow: 3px 3px 6px gray; overflow: hidden; z-index: 1; position: relative; display: grid; place-items: center;}

#ydtp{ position: absolute;z-index: 3;width: 100%; height: 100%;animation: ydt 6s linear infinite ;background:#000 url(https://pic.imgdb.cn/item/67162491d29ded1a8c210f14.jpg)no-repeat center/cover;}

@keyframes ydt {100%{ transform:scale(1); opacity: 1;}50%{ transform:scale(1); opacity: 1;}0%{ transform:scale(3);opacity: 0;}}
#qmsvg{ position: absolute;z-index: 10;
      left: 5%;cursor: pointer;
      top: 5%;
       animation: rot 10s linear infinite ;
}
@keyframes rot {to { transform: rotate(360deg);filter: hue-rotate(360deg); }}
#lrc{left: 15%;top: 82%;}#lrcc {right:15%;top: 90%;}
#lrc,#lrcc{--state: paused;--motion: cover2;--tt: 2s;--bg:#ff0000;border:0px solid black;position: absolute;font:normal 2.5em 华文隶书;color: #000;white-space: pre;-webkit-background-clip: text;z-index: 9;filter:drop-shadow(#fff 1px 0 0)drop-shadow(#fff 0 1px 0)drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px0);}
#lrcc::before,#lrc::before {position: absolute;content: attr(data-lrc);width: 20%;height: 100%;color: #880000;overflow: hidden;white-space: pre; animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}
@keyframes cover1 {from {width: 0;}to {width: 100%;}}@keyframes cover2 {}
.list{list-style: none;left: -50px;top: 130px;width:100%;height:100%;position:absolute;z-index: 4;overflow:hidden;}
.list li{width: 90%;height: 90%;top: 10px;position:relative;line-height: 720px;text-align: center;left: 5%;font: 6004em/1.2em 华文隶书;animation: myfirst 32s linear 1 0s;color:#880000;transition: all .5s;filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px 0);opacity:0;overflow:hidden;opacity: 0;}
.stop .list li{animation-play-state: paused;}
@keyframes myfirst {0% {
          opacity: 0;
           transform:perspective(600px) translate(100%,0%)scale(1)rotateX(0deg)rotateY(0deg);
        }
        10% {
          opacity: 1;
          transform: translateX(0px);
        }
50% {
          opacity: 1;
          transform: translateX(0px);
        }
60% { opacity: 1;transform:perspective(600px) translate(-120%,0%)scale(1)rotateX(90deg)rotateY(0deg);}

100% { opacity: 0;transform:perspective(600px) translate(-120%,0%)scale(1)rotateX(90deg)rotateY(0deg);}
}
</style>

<div id="papa">
<div id="ydtp" ></div>
<div id="testImg" ><div class="list">
<li><p style="zoom:1.2">忘恩负义</p><br /><p style="zoom: .7">代码编辑 亚伦<br />亚伦影音工作室<br/>演唱:金久哲</p></li>
</div></div>
<svgid="qmsvg"width="200px" height="200px">
        <defs>
                <path id="path" d="M0 100 A100 100 0 1 1 200 100 A100 100 0 1 1 0 100"/>
        </defs>
        <text dx="30" dy="30" font-size="30" fill="#ffff00"font-family="'楷体'">
                <textPath href="#path" textLength="600">花潮论坛亚伦影音工作室</textPath>
        </text>
</svg>
<div id="lrc" data-lrc=""></div>
<div id="lrcc" data-lrc=""></div>

</div>

<audio id="aud" src="https://music.163.com/song/media/outer/url?id=571336229.mp3" autoplay loop>
<script>
qmsvg.onclick = () => aud.paused ? ( aud.play(),image.classList.remove('stop')):(aud.pause(),image.classList.add('stop'));
qmsvg.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>qmsvg.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>qmsvg.style.animationPlayState = 'paused');
ydtp.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>ydtp.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>ydtp.style.animationPlayState = 'paused');

var image= document.getElementById("testImg");
</script>
<span id="lrcStr" style="visibility: hidden;">


金久哲-忘恩负义
作词：张丰
作曲：金久哲
编曲：郭亮
和声：海青
录混：陈雅森
封面拍摄：炳傲
制作人：亚伦
如今的人心真是难测量
虚伪的小嗑唠的有模有样
谁知你转过身就坏了心肠
在我的背后你就放了冷枪
是什么让你如此的猖狂
分不清这个世界谁是大小王
给你点阳光你就灿烂到疯狂
虚假的背后让人防不胜防
忘恩负义的人呐你就是白眼狼
给你点名和利你就把心眼藏
不懂感恩的人谁能把你来帮
小心有一天有同样下场
忘恩负义的人呐你就是白眼狼
给你点名和利就忘了爹和娘
人生这条路不一定谁辉煌
做人一定要坦坦荡荡
如今的人心真是难测量
虚伪的小嗑唠的有模有样
谁知你转过身就坏了心肠
在我的背后你就放了冷枪
是什么让你如此的猖狂
分不清这个世界谁是大小王
给你点阳光你就灿烂到疯狂
虚假的背后让人防不胜防
忘恩负义的人呐你就是白眼狼
给你点名和利你就把心眼藏
不懂感恩的人谁能把你来帮
小心有一天有同样下场
忘恩负义的人呐你就是白眼狼
给你点名和利就忘了爹和娘
人生这条路不一定谁辉煌
做人一定要坦坦荡荡
忘恩负义的人呐你就是白眼狼
给你点名和利你就把心眼藏
不懂感恩的人谁能把你来帮
小心有一天有同样下场
忘恩负义的人呐你就是白眼狼
给你点名和利就忘了爹和娘
人生这条路不一定谁辉煌
做人一定要坦坦荡荡/
</span>
<script >
(function() {
/*变量 ：mKey - 当前歌词索引；averAdd ：平均值补偿*/
let mKey = 0,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 arr="";
      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) => {
      lrca=lrcAr;
      lrcAr.length==mKey+1?lrcb="":lrcb=lrcAr;//判断最后一句歌词
      let Y=String(mKey/2).indexOf(".");
      if (Y == -1)
    {
      0==mKey&&(lrc.innerHTML=lrca);
      lrc.dataset.lrc = lrca;
    lrcc.innerHTML = lrcb;
      lrcc.dataset.lrc = "";
      lrc.style.setProperty('--motion', 'cover1');
      lrc.style.setProperty('--tt', time + 's');
      lrc.style.setProperty('--state', 'running');
    lrcc.style.setProperty('--motion', 'cover2');
      }
    else
    {
      lrc.innerHTML = lrcb;
      lrcc.dataset.lrc = lrca;
      lrc.dataset.lrc = "";
    lrcc.style.setProperty('--motion', 'cover1');
      lrcc.style.setProperty('--tt', time + 's');
      lrcc.style.setProperty('--state', 'running');
    lrc.style.setProperty('--motion', 'cover2');
      }
      mKey += 1;
};
/*函数 ：处理当前歌词索引 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 mState = () => aud.paused?(lrc.style.setProperty("--state","paused"),lrcc.style.setProperty("--state","paused"),mdiv.style.animationPlayState="paused"):(lrc.style.setProperty("--state","running"),lrcc.style.setProperty("--state","running"),mdiv.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;
                }
      }
});
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('pause', () => mState());/*监听暂停事件*/
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr.innerHTML); /*获得歌词数组*/
})();
</script>

梦油 发表于 2024-10-23 21:11

欣赏佳作，问候亚伦。

红影 发表于 2024-10-23 21:15

标题字随时间会收起，收起的动态很漂亮。
圆圈字的小播设计也很美，还能一键暂停。欣赏亚伦老师好帖{:4_199:}

老谟深虑 发表于 2024-10-25 15:13

            欣赏老师的精美音画，学习了！

小辣椒 发表于 2024-10-25 17:03

亚伦这个背景2个图片，没有视频，图片加了进退效果，漂亮{:4_199:}

小辣椒 发表于 2024-10-25 17:03

欣赏亚伦的精彩制作{:4_187:}

查看完整版本: 金久哲-忘恩负义