论坛 › 欢乐水吧 › 心碎红颜泪 - 陈瑞

亚伦影音工作室 发表于 2025-8-28 11:52

心碎红颜泪 - 陈瑞

本帖最后由 亚伦影音工作室 于 2025-8-28 11:52 编辑 <br /><br /><style>
#papa{margin: 10px 0 20px calc(50% - 721px); background:url(https://pic.3gbizhi.com/uploadmark/20200629/9724ab7e7be6559bf08d69b66fa63d2a.webp)no-repeat center/cover;width: 1286px; height: 720px;   box-shadow: 3px 3px 6px gray; overflow: hidden; z-index: 1234567; position: relative;}
#bfq{ bottom: 34px;left:30%;position: absolute;width: 120px; height: 40px;overflow: hidden;z-index: 6;}
#cndpt{ bottom: 0px;
      left:35px; z-index: 60;
    position: absolute;width: 40px; height: 40px;
    background: url(https://pic.imgdb.cn/item/675813f6d0e0a243d4e14a48.png)no-repeat 0px 0px/cover; }
#enopg{
    position: absolute;width: 40px; height: 40px;
   background: url(https://pic.imgdb.cn/item/675813e7d0e0a243d4e14a18.png) no-repeat 0px 0px/cover;
    display:none;
}
#tmsg {position: absolute;z-index: 6;
      font: normal 14px sans-serif;
      color: #fff;
         bottom: 10px;
      left:0;}

#mypic1 {top:10%; z-index: 6;left:0%;
display: block;position: absolute;
    width: 200px; height: 200px;
    background: url(https://pic1.imgdb.cn/item/68aea5e458cb8da5c8552f40.png)no-repeat center/1800px 200px;
animation: heart-burst steps(9) 0.8s infinite; transform: rotateY(3.142rad);
}
#mypic2 {top:10%; z-index: 6;left:0%;
display: block;position: absolute;
    width: 200px; height: 200px;
    background: url(https://pic1.imgdb.cn/item/68aea5e458cb8da5c8552f40.png)no-repeat center/1800px 200px;
animation: heart-burst steps(9) 1s infinite; transform: rotateY(3.142rad)scale(0.8);
}

@keyframes heart-burst {
0% {background-position: 0px 0;}
100% {background-position: -1800px 0;}
}
#plane1{position: absolute;left: 250px;top: 0;width:400px;offset-distance: 0;offset-path: path("M0 10 Q500 180, 720 160 T1200 30");animation: move 6s linear infinite;}
#plane2 {position: absolute;left: 50px;top: 20px;width: 400px;offset-distance: 0;offset-path: path("M0 10 Q500 180, 720 160 T1320 20");animation: move 8s linear infinite;}

@keyframes move { to { offset-distance: 100%;} }

#lrc {--state: paused;--motion: cover2;--tt: 2s;--bg: linear-gradient(0deg, #880000, #880000, #880000);
position: absolute;z-index: 6;left: 18%; top: 10%;transform: translate(0%);letter-spacing: 2px;font:normal 2.8em/1em 华文隶书; font-weight:400;color: #000080;white-space: pre;writing-mode: vertical-lr;-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: 100%; height: 0%;color: transparent;overflow: hidden;white-space: pre;background: var(--bg);
                background-clip: text; /* 重设背景剪裁风格（重要） */-webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}
@keyframes cover1 { from { height: 0; }to { height: 100%; } }
        @keyframes cover2 { from { height: 0; }to { height: 100%; } }
</style>
<div id="papa">
<div id="bfq">
<div id="cndpt" onclick="pic()" >
<div id="enopg" ></div>
</div>
<div id="tmsg"></div>
</div>
<div id="plane1" ><div id="mypic1" ></div></div>
<div id="plane2" ><div id="mypic2" ></div></div>
<div data-lrc="" id="lrc"></div>

</div>
<audio id="aud" src="https://s2.cldisk.com/sv-w7/audio/16/e3/3b/41cedfd769cd8ac8def99cd0d83c13c3/audio.mp3" autoplay loop ></audio>
<script >
function pic(){
    varimgElement= document.getElementById('enopg');
    if (imgElement.style.display === 'none' || imgElement.style.display === '') {
       imgElement.style.display = 'block';
       aud.pause();
mypic1.style.animationPlayState = 'paused';mypic2.style.animationPlayState = 'paused';

       } else {
    imgElement .style.display = 'none';
    aud.play();
mypic1.style.animationPlayState = 'running';mypic2.style.animationPlayState = 'running';
    }
}

aud.addEventListener('timeupdate', () => {
            tmsg.innerText = toMin(aud.currentTime) + '******' + toMin(aud.duration);
      });
      
      function toMin(val) {
            if (!val) return '00:00';
            val = Math.floor(val);
            let min = parseInt(val / 60);
            let sec = parseFloat(val % 60);
            if (min < 10) min = '0' + min;
            if (sec < 10) sec = '0' + sec;
            return min + ':' + sec;
      }
</script >
<script >
(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'),plane1.style.animationPlayState = 'paused',plane2.style.animationPlayState = 'paused') : (lrc.style.setProperty('--state','running'),plane1.style.animationPlayState = 'running',plane2.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 '000:000';
        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); /*获得歌词数组*/
})();
</script>

梦油 发表于 2025-8-28 14:23

欣赏佳作，问候亚伦。

杨帆 发表于 2025-8-28 16:03

漂亮！谢谢亚伦老师精彩分享{:4_191:}

岁月·如歌 发表于 2025-8-30 17:52

精彩{:4_204:}{:4_199:}

查看完整版本: 心碎红颜泪 - 陈瑞