论坛 › 欢乐水吧 › 惜别的海岸 - 张乙

亚伦影音工作室 发表于 2024-3-31 15:02

惜别的海岸 - 张乙

本帖最后由 亚伦影音工作室 于 2024-5-30 19:01 编辑 <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}

.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/6600e87c9f345e8d03adc879.jpg)no-repeat center/cover;}
.演员:nth-child(3) {animation-delay: 12s;background:url(https://pic.imgdb.cn/item/6600e7829f345e8d03a9a674.jpg)no-repeat center/cover;}
.演员:nth-child(2) {animation-delay: 6s;background:url(https://pic.imgdb.cn/item/65d054569f345e8d0339cb08.jpg)no-repeat center/cover;}
.演员:nth-child(1) {animation-delay: 0s;background:url(https://pic.imgdb.cn/item/65db15639f345e8d03a78720.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>
#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>


<audio id="aud" src="https://music.163.com/song/media/outer/url?id=447079666.mp3" autoplay loop></audio>
<div id="testImg" >
<div class="photo" > <img   src="https://pic.imgdb.cn/item/66090ab39f345e8d03fb0a8a.jpg" style="transform: rotateY(0deg);width:100%;height:100%" /></div>
<div class="photo" > <img   src="https://pic.imgdb.cn/item/66090ab39f345e8d03fb0a8a.jpg" style="transform: rotateY(180deg);width:100%;height:100%" /></div>
</div>

<div id="Img" >
<div class="演员" ></div>
<div class="演员" > </div>
<div class="演员" > </div>
<div class="演员" > </div>
</div>
<div data-lrc="惜别的海岸 - 张乙" id="lrc">惜别的海岸 - 张乙</div>

<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>
<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');

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>

老谟深虑 发表于 2024-3-31 15:42

         欣赏老师的精美音画，点赞！收藏学习。谢谢！

红影 发表于 2024-3-31 20:28

美女图轮播还有背景图的滚动都很漂亮，欣赏亚伦老师好帖{:4_199:}

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

这个还是一键全控的，真帮{:4_187:}

樵歌 发表于 2024-3-31 21:19

做得漂亮！

查看完整版本: 惜别的海岸 - 张乙