论坛 › 欢乐水吧 › 城市月光【背景无缝连接】

亚伦影音工作室 发表于 2024-3-29 21:25

城市月光【背景无缝连接】

本帖最后由 亚伦影音工作室 于 2024-4-12 14:18 编辑 <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; }
      #geci{width: 100%;
font: normal 3em/0em 华文隶书;
      color: #ff0000;
       filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px0);
      text-align:center;
       position: absolute; pointer-events: none;
      z-index: 10;
}

#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}

#tp{ position: absolute;    margin:0px 0;width: 100%;height: 100%;z-index: 2; mix-blend-mode: lighten;
        background:url(https://pic.imgdb.cn/item/65db15629f345e8d03a78591.jpg)no-repeat center/cover; animation: tpyin 10s infinite linear ;}
@keyframes tpyin {0% {opacity: 1;}50% {opacity: 0;}100% {opacity: 1;}}
</style>
<style>
#gj {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: 350px;
height: 350px;
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')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;
      cursor: pointer;
}
.pink { background: url('https://pic.imgdb.cn/item/642e1dcea682492fcc4d5bb1.png')no-repeat center/cover;transform:rotate(-2deg);transform-origin: 100% 0%;}
.purple { background: url('https://pic.imgdb.cn/item/642e1dcea682492fcc4d5bb1.png')no-repeat center/cover; transform-origin: 75% 0%;margin: 25px -32px;transform:rotate(-20deg);}
#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 {
      --state: paused;
      --motion: cover2;
      --tt: 2s;
      --bg: #880000;
      position: absolute;z-index: 6;
      left: 48%;
      transform: translate(-52%);
      top: 86%;
      font:normal 3em 华文新魏;
      color: #000080;
      -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);
}
@keyframes cover1{0% { width: 0%;}100% { width: 100%;}}
@keyframes cover2 { 0% { width: 0%;}100% { width: 100%;}}
</style>

<div id="papa" >
<span id="fullscreen">全屏</span>
<divid="prog"></div>
        <div id="gj" >
<div id="pic" ></div>
<div id="mplayer" class="pink"></div>
<div id="tmsg">00:00 | 00:00</div>
</div>
<div data-lrc="城里月光" id="lrc">城里月光</div>
<audio id="aud" src="https://www.kumeiwp.com/sub/filestores/2024/04/12/e9f02052d5300483f46614fc59079733.mp3" autoplay loop></audio>
<div id="testImg" >
<div class="photo" > <img   src="https://pic.imgdb.cn/item/6605171d9f345e8d0336b0e0.jpg" style="transform: rotateY(0deg);width:100%;height:100%" /></div>
<div class="photo" > <img   src="https://pic.imgdb.cn/item/6605171d9f345e8d0336b0e0.jpg" style="transform: rotateY(180deg);width:100%;height:100%" /></div>
<div id="tp" ></div>
</div>
<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 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 mState = () => aud.paused ? (lrc.style.setProperty('--state','paused')) : (lrc.style.setProperty('--state','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); /*获得歌词数组*/
})();

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

tp.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => tp.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>tp.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>

<style>
.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(1),
.stop .photo:nth-child(2){animation-play-state: paused;}
</style>

<script>
/*控制动画*//*控制动字*/
(function(){
var image = document.getElementById("testImg");
let mState = () => aud.paused ? (image.classList.add('stop')):(image.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>

大猫咪 发表于 2024-3-29 21:31

制作真漂亮！ 赞！图美歌靓！《城里的月光》，为何竟会如此扣人心弦。。

{:4_187:}{:4_178:}{:4_199:}

小辣椒 发表于 2024-3-29 21:52

漂亮，背景移动流畅，我黑黑的教程还没有做过，这个我还是感觉这个播放器漂亮{:4_178:}

小辣椒 发表于 2024-3-29 21:52

感谢亚伦精美的制作

亚伦影音工作室 发表于 2024-3-29 22:05

小辣椒 发表于 2024-3-29 21:52
感谢亚伦精美的制作

和马老师不一样，这是用滤镜制作的背景链接的！

起个网名好难 发表于 2024-3-30 09:00

画面很漂亮了，赞！

背景移动有点快。

红影 发表于 2024-3-30 10:20

这个漂亮，加个明暗变化的前景，和移动背景呼应，把这首歌曲的内涵诠释得如此深刻。
欣赏亚伦老师好帖{:4_199:}

小辣椒 发表于 2024-3-30 20:14

亚伦影音工作室 发表于 2024-3-29 22:05
和马老师不一样，这是用滤镜制作的背景链接的！

看见了，漂亮的制作，亚伦好棒！{:4_178:}

查看完整版本: 城市月光【背景无缝连接】