论坛 › 欢乐水吧 › 就是南方凯《春风何时来》

亚伦影音工作室 发表于 2024-4-3 21:52

就是南方凯《春风何时来》

本帖最后由 亚伦影音工作室 于 2024-4-5 01:53 编辑 <br /><br /><style>
#papa{margin: 150px -300px;
        width: 1164px;
        height: 620px;
        background:url(https://pic.imgdb.cn/item/64e9ee70661c6c8e544cd94a.jpg)no-repeat center/cover;
        box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000;
        position: relative;overflow: hidden;
        z-index: 12345; }
      

#papa:hover #fullscreen { display:block ;opacity: 1;}
#fullscreen { position: absolute; top:5%; left:calc(95% - 15px);font: normal 2em/0em 楷体;color:#ffffff; opacity: 1; cursor: pointer; z-index: 111}

.photo {width: 100%;
height: 100%;
position: absolute;
z-index: 1;
top:0px; left:0%;
opacity: 1;
animation: round 16s linear infinite;}
@keyframes round{0% {opacity: 1;transform:translate(100%,0%)scale(1) ;}
100% {opacity: 1;transform:translate(-100%,0%)scale(1) ;}
}

.photo:nth-child(2) {animation-delay: 8s;}
.photo:nth-child(1) {animation-delay: 0s;}

.stop .photo:nth-child(2),
.stop .photo:nth-child(1){animation-play-state: paused;}

.演员 {width: 100%;
height: 100%;
position: absolute;
z-index: 1;mix-blend-mode:lighten;
top:0px; left:0%;
opacity: 0;
animation: rod 24s linear infinite;}
@keyframes rod{0% {opacity: 0;transform:translate(0%,0%)scale(1) ;}
6% {opacity: 1;transform:translate(0%,0%)scale(1) ;}
24% {opacity: 1;transform:translate(0%,0%)scale(1) ;}
30% {opacity: 0;transform:translate(0%,0%)scale(1) ;}
}
.演员:nth-child(4) {animation-delay: 18s;background:url(https://pic.imgdb.cn/item/64e0d36a661c6c8e541a39a5.jpg)no-repeat center/cover;}
.演员:nth-child(3) {animation-delay: 12s;background:url(https://pic.imgdb.cn/item/64ce4f0e1ddac507ccfe1eae.jpg)no-repeat center/cover;}
.演员:nth-child(2) {animation-delay: 6s;background:url(https://pic.imgdb.cn/item/658d7b30c458853aefc07335.jpg)no-repeat center/cover;}
.演员:nth-child(1) {animation-delay: 0s;background:url(https://pic.imgdb.cn/item/658c0a24c458853aef9d89ab.jpg)no-repeat center/cover;}

.stop .演员:nth-child(1),
.stop .演员:nth-child(2),
.stop .演员:nth-child(3),
.stop .演员:nth-child(4){animation-play-state: paused;}

</style>
<style>
#bfq {top:20%; left:40%;z-index: 21;
position: absolute;overflow: hidden;transform:scale(0.4);
width: 100%;
height: 100%;}
#pic {top:20%; left:5%;z-index: 20;
position: absolute;
width: 360px;
height: 360px;
border-radius: 50%;
border:2px solid #000000;
background:url('https://pic.imgdb.cn/item/642d9c53a682492fcccad99f.png') center/cover no-repeat,url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/b0bea37f1dff1ba2977e3d3cdf8cf8ea.jpg')no-repeat 30px 50px/100% 60%;
animation: spin 10s infinite linear ;}
@keyframes spin {100% { transform: rotate(360deg); }
}

#mplayer {position: absolute;
      top:2%; left:0%;z-index: 21;
      width: 500px;
      height: 500px;
background: url('https://pic.imgdb.cn/item/65ffbbe89f345e8d036024a8.png')no-repeat 280px 22px/200px 380px;
      cursor: pointer;
}
.pink { transform:rotate(-2deg);transform-origin: 100% 0%;margin: 0px 0px;}
.purple { transform-origin: 85% 0%;margin: 12px -15px;transform:rotate(-16deg);}
#tmsg {position: absolute;z-index: 20;
      font: normal 25px sans-serif;
      color: #ffffff;
         top:500px;
      left:14%;}
#prog {position: absolute;z-index: 91;
      width: 80%;
      height: 0.3%;
      cursor: pointer;
         top:95%;
         margin:0px 10%;
         border-radius: 2px;}

#lrc{left: 10%;top: 75%;}#lrcc {right:10%;top: 85%;}
#lrc,#lrcc{--state: paused;--motion: cover2;--tt: 2s;--bg: linear-gradient(180deg, #880000, #880000);border:0px solid black;position: absolute;z-index: 2;font:normal 2.5em 华文新魏;color: #000078;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 -1px 0);z-index: 20;}
#lrcc::before,#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);}
@keyframes cover1 {from {width: 0;}to {width: 100%;}}@keyframes cover2 {}
</style>

<div id="papa" >
<span id="fullscreen">全屏</span>
<audio id="aud" src="https://cdn.mxnet.top/view.php/f34744dee4d71bc825ea99ca68ed2ab0.mp3" autoplay loop ></audio>
<div id="testImg" >
<div class="photo" > <img   src="https://pic.imgdb.cn/item/6608fdcf9f345e8d039be6cd.jpg" style="transform: rotateY(180deg);width:100%;height:100%" /></div>
<div class="photo" > <img   src="https://pic.imgdb.cn/item/6608fdcf9f345e8d039be6cd.jpg" style="transform: rotateY(0deg);width:100%;height:100%" /></div>
</div>

<div id="Img" >
<div class="演员" ></div>
<div class="演员" > </div>
<div class="演员" > </div>
<div class="演员" > </div>
</div>
<div id="lrc" data-lrc=""></div>
<div id="lrcc" data-lrc=""></div>

<divid="prog"></div>
        <div id="bfq" >
<div id="pic" ></div>
<div id="mplayer" class="pink"></div>
<div id="tmsg">00:00 | 00:00</div>
</div>
</div>
<script >

mplayer.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => mplayer.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>mplayer.style.animationPlayState = 'paused');

mplayer.addEventListener('click', () => aud.paused ? (aud.play(),mplayer.classList.remove('purple')) : (aud.pause(),mplayer.classList.add('purple')));
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());

pic.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>pic.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>pic.style.animationPlayState = 'paused');

prog.onclick = (e) => {aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;}
aud.addEventListener('timeupdate', () => {
               aud.addEventListener('timeupdate', () => {prog.style.background= 'linear-gradient(90deg, red, red, red ' + aud.currentTime / aud.duration * 100 + '%, snow 0)';});
                tmsg.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);

      });
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;
      };
</script>

<script>
/*控制动画*//*控制动字*/
(function(){
var image = document.getElementById("testImg");
var image1 = document.getElementById("Img");
let mState = () => aud.paused ? (image.classList.add('stop'),image1.classList.add('stop')):(image.classList.remove('stop'),image1.classList.remove('stop'));
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
})();
/*结束*//*结束*/
let fs = true;
      fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出', papa.requestFullscreen()) : (fullscreen.innerText = '全屏', document.exitFullscreen());
                fs = !fs;
      };

</script>

<span id="lrcStr" style="visibility: hidden;">
无名音乐网 www.m326.com
腾讯音乐人·Nevermind Studio
我的春风何时来
带我走向大海
谁能想到
感情还要出卖
让我渐渐明白
不能置身事外
还好乌云已被打开
我的春风何时来
带我走向大海
谁能想到
感情还要出卖
让我渐渐明白
不能置身事外
还好乌云已被打开
我曾为你买过单
兄弟大过天
一步迈进万丈深渊
人生苦短
有多少痴恋
想她想她的容颜
远方的呼喊
不敢再想念
夜晚拿着你的相片
在黑暗里徘徊
在孤单中等待
等待等待命运安排
我的春风何时来
带我走向大海
谁能想到
感情还要出卖
让我渐渐明白
不能置身事外
还好乌云已被打开
我的春风何时来
带我走向大海
谁能想到
感情还要出卖
让我渐渐明白
不能置身事外
还好乌云已被打开
冰冷的双眼
男儿的勇敢
许人一物千金不换
言多必失
学会知而不言
一种残忍叫做背叛
我的春风何时来
带我走向大海
谁能想到
感情还要出卖
让我渐渐明白
不能置身事外
还好乌云已被打开
我的春风何时来
带我走向大海
谁能想到
感情还要出卖
让我渐渐明白
不能置身事外
还好乌云已被打开
还好乌云已被打开
</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;
                }
        }
});
aud.addEventListener('pause', () => mState());/*监听暂停事件*/
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr.innerHTML); /*获得歌词数组*/
})();

</script>

小辣椒 发表于 2024-4-3 23:13

亚伦特棒，每个帖都会有新的修改，这个代码仔细看了，移动的无缝链接加上背景图片，加了播放器，歌词同步，这么多素材一键停止{:4_178:}

红影 发表于 2024-4-3 23:14

漂亮的滚动图加图片轮播制作，欣赏亚伦老师好帖{:4_199:}

小辣椒 发表于 2024-4-3 23:14

非常漂亮的制作{:4_199:}

流水光阴 发表于 2024-4-4 13:28

{:4_208:}

流水光阴 发表于 2024-4-4 13:28

{:4_208:}{:4_208:}

流水光阴 发表于 2024-4-4 13:28

{:4_208:}{:4_208:}{:4_208:}

查看完整版本: 就是南方凯《春风何时来》