论坛 › 欢乐水吧 › 又想在孤独的午夜

亚伦影音工作室 发表于 2024-7-29 15:16

又想在孤独的午夜

本帖最后由 亚伦影音工作室 于 2025-4-5 13:34 编辑 <br /><br /><style>
#papa {
        margin: 30px 0 30px calc(50% - 723px);
        width: 1400px;
        height: 700px;
        background: url('https://pic.imgdb.cn/item/66a34f6ed9c307b7e9581634.jpg') no-repeat center/cover;
        overflow: hidden;
        box-shadow: 0 0 10px #000;
        z-index: 1;
        position: relative;
}
#player {
        position: absolute;
        bottom: -10px;
        left: calc(50% - 265px);
        width: 300px;
        height: 300px;
        border: 6px solid #eee;
        border-radius: 50%;
        cursor: pointer;
        transform: rotateX(60deg);
        --tt: 6s;
}
#player::before, #player::after {
        position: absolute;
        content: '';
        border: inherit;
        border-radius: inherit;
        animation: rot var(--tt) linear infinite var(--state);
}
#player::before {
        inset: 20px;
        border-color: transparent #aaa;
}
#player::after {
        inset: 40px;
        border-width: 12px;
        border-style: dashed;
        --tt: 4s;
}
li-zi {
        position: absolute;
        width: 5px;
        height: 10px;
        border-radius: 50%;
        box-shadow: inset 0 0 5px #eee;
}
@keyframes moving {
        from { transform: translateY(0); opacity: 1; }
        to { transform: translateY(-800px); opacity: 0; }
}
@keyframes rot { to { transform: rotate(360deg); } }



.cont {position: absolute;
width: 0;
height: 0;

top: 30%;
left: 30%;
perspective: 420px;
perspective-origin: center -150px;
}

.bird {
width: 0;
height: 30px;
position: absolute;
top: 50%;
left: 50%;
animation: bird 15s infinite linear;
}

.bird:nth-child(2) {
animation-delay: -5s;
}
.bird:nth-child(3) {
animation-delay: -10s;
}
.stop .bird::before,
.stop .bird::after{animation-play-state: paused;}
.stop .bird,
.stop .bird:nth-child(2),
.stop .bird:nth-child(3){animation-play-state: paused;}

@keyframes bird {
from {
    transform: translate(-50%, -50%) rotateY(0deg) translate3d(150px, 0, 0);
}
to {
    transform: translate(-50%, -50%) rotateY(-360deg) translate3d(150px, 0, 0);
}
}
.bird::before, .bird::after {
content: "";
width: 50px;
height: 30px;
position: absolute;
top: 0;
border: 0 solid;
border-top: 5px solid #aaa;
animation: 1s infinite ease-in-out;
}
.bird::before {
right: -3px;
animation-name: wing-b;
}
@keyframes wing-b {
0%, 100% {
    border-radius: 10% 100%;
}
33% {
    border-radius: 50% 100%;
}
}
.bird::after {
left: -3px;
animation-name: wing-a;
}
@keyframes wing-a {
0%, 100% {
    border-radius: 100% 10%;
}
33% {
    border-radius: 100% 50%;
}
}
#lrc{left: 15%;top: 45%;}#lrcc {right:35%;top: 52%;}
#lrc,#lrcc{--state: paused;--motion: cover2;--tt: 2s;position: absolute;font:normal 2em 仿宋;color: #aaa;white-space: pre;-webkit-background-clip: text;z-index: 20;filter: drop-shadow(2px 2px 1px #000); }
#lrcc::before,#lrc::before {position: absolute;content: attr(data-lrc);width: 20%;height: 100%;color: #fff;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 {}

</style>

<div id="papa">
        <!-- Moola Mantra -->
<div id="tnpmImg">
<div class="cont">
<div class="bird"></div>
<div class="bird"></div>
<div class="bird"></div>
</div>
</div>
<div id="lrc" data-lrc=""></div>
<div id="lrcc" data-lrc=""></div>
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2153942216.mp3" autoplay loop></audio>
        <div id="player" title="播放/暂停" class="loading"></div>
</div>

<script>
var all = 300;
for(var i = 0; i < all; i++) {
        var lz = document.createElement('li-zi');
        lz.style.cssText += `
                left: ${ 60 + Math.floor(Math.random() * 160)}px;
                top: ${ 60 + Math.floor(Math.random() * 160)}px;
                background: #${Math.random().toString(16).substring(2,8)};
                animation: moving ${Math.random() * 2 + 2}s -${Math.random() * 4}s cubic-bezier(0.01, 0.12, 0.6, 1.04) infinite var(--state);
        `;
        player.prepend(lz);
}
aud.oncanplay = aud.onplaying = aud.onpause = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
player.onclick = () => aud.paused ? aud.play() : aud.pause();

(function(){
var image0 = document.getElementById("tnpmImg");
let mState = () => aud.paused ? (image0.classList.add('stop')):(image0.classList.remove('stop'));
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
})();
</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"),mplayer.style.animationPlayState="paused"):(lrc.style.setProperty("--state","running"),lrcc.style.setProperty("--state","running"),mplayer.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-7-29 16:03

         欣赏老师的佳作，点赞！

梦油 发表于 2024-7-29 16:38

欣赏佳作，问候亚伦。

红影 发表于 2024-7-29 19:39

这三只雁儿的动态设计真漂亮。
画面漂亮，歌曲好听。
欣赏亚伦老师好帖{:4_199:}

小辣椒 发表于 2024-7-29 23:11

亚伦这个粒子效果也是漂亮的{:4_199:}

小辣椒 发表于 2024-7-29 23:13

欣赏亚伦的精彩制作，特别棒的效果！

查看完整版本: 又想在孤独的午夜