《人生何处不相逢》,单图音画,纳兰音画网,音画设计分享诗词朗诵音乐欣赏播放器设计论坛 - Bbs.CnzV.cC - Powered by Discuz! Archiver

论坛首页 › 单图音画 › 《人生何处不相逢》

醉美水芙蓉 发表于 2024-12-21 19:00:57

《人生何处不相逢》

<style type="text/css">
#papa{
position: relative;
width: 1286px;
height: 720px;
   margin-left:-300px;
margin-top:180px;
border: 1px solid rgba(36, 201, 219,.95);
   border-radius: 2px;
background:#000;
overflow: hidden;
}
#vid1{width: 100%; height: 100%;z-index: 1;
position:absolute;
top:0%; left:0%;
object-fit: cover; pointer-events: none;
}
.vid{width: 100%; height: 100%;z-index: 2;
position:absolute;
top:0%; left:0%;

opacity: 0;object-fit: cover; pointer-events: none;
animation: round 100s linear infinite;}
@keyframes round {0% {opacity: 0;}
4% {
opacity: 1;}
10% {
opacity: 1;}
15% {
opacity: 0;}
}
.vid:nth-child(1){animation-delay: 90s;}
.vid:nth-child(2){animation-delay: 80s;}
.vid:nth-child(3){animation-delay: 70s;}
.vid:nth-child(4) {animation-delay: 60s;}
.vid:nth-child(5) {animation-delay: 50s;}
.vid:nth-child(6){animation-delay: 40s;}
.vid:nth-child(7){animation-delay: 30s;}
.vid:nth-child(8){animation-delay: 20s;}
.vid:nth-child(9) {animation-delay: 10s;}
.vid:nth-child(10) {animation-delay: 0s;}
.stop .vid:nth-child(1),
.stop .vid:nth-child(2),
.stop .vid:nth-child(3),
.stop .vid:nth-child(4),
.stop .vid:nth-child(5),
.stop .vid:nth-child(6),
.stop .vid:nth-child(7),
.stop .vid:nth-child(8),
.stop .vid:nth-child(9),
.stop .vid:nth-child(10){animation-play-state: paused;}

#mdiv {top:12%; left:5%;cursor: pointer;
width:200px;text-align:center;animation:rot 10s linear infinite;
position: absolute;filter:drop-shadow(#000 0px 0 1px);
z-index: 40;
}
@keyframes rot { to { transform: rotate(2turn);} }
#mdiv:hover {}
#lrc {
   --state: paused;
   --motion: cover2;
   --tt: 2s;
   --bg: #880000;
   position: absolute;z-index: 6;
   left: 50%;
   transform: translate(-50%);
   top: 86%;
   font:normal 3em 华文新魏;
color: #000;

   -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%;}}
#fullscreen { position: absolute; bottom:92%; left:85%;font:900 2em/0em 楷体;color:#ffffff; opacity: 1; cursor: pointer; z-index: 111}
</style >
<div id="papa" >
<span id="fullscreen">全屏欣赏</span>

<video id="vid1" src="https://video-qn.51miz.com/preview/video/00/00/13/73/V-137379-ED6D74D3.mp4" loop muted autoplay=""></video>
<div id="testImg">

<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/64/21/V-642144-D5E8D07B.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/14/71/V-147117-32B4CEF3.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/64/19/V-641906-C15A6FE2.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/64/04/V-640493-88502DD5.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/64/22/V-642242-676CD49F.mp4" loop muted autoplay=""></video>

<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/64/13/V-641347-C500102B.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/17/39/V-173954-7FEE64E3.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/64/17/V-641787-0EE5A51F.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/15/53/V-155306-C6C67A1F.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/17/53/V-175304-FCADEF3A.mp4" loop muted autoplay=""></video>
</div>
<audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w9/audio/02/61/9d/c0814062cfcb2191bc1eae19e7f95182/audio.mp3" autoplay loop></audio>
<div id="mdiv">
<svg width="100" height="100" viewBox="-160 -160 320 320">
<defs>
<filter id="shadow">
<feDropShadow dx="0" dy="0" stdDeviation="1" flood-color="black"></feDropShadow>
</filter>
<g id="part" filter="url(#shadow)">
<line x1="0" y1="-100" x2="0" y2="100" stroke="#880" stroke-width="4"></line>
<ellipse cx="0" cy="-125" rx="20" ry="20" fill="#fff"></ellipse>
<ellipse cx="0" cy="125" rx="20" ry="20" fill="#fff"></ellipse>
</g>
</defs>
<use href="#part"></use>
<use href="#part" transform="rotate(35)"></use>
<use href="#part" transform="rotate(70)"></use>
<use href="#part" transform="rotate(105)"></use>
<use href="#part" transform="rotate(140)"></use>
</svg>
</div>
<div data-lrc="视频转场效果" id="lrc">视频转场效果</div>
</div>

<script>
(function() {
   const vids = document.querySelectorAll('.vid');
   var mState = () => {
      vids.forEach(vid => aud.paused ? vid.pause() : vid.play());
   };
   aud.onplaying = aud.onpause = () => mState();
   })();

mdiv.onclick = () => aud.paused ? (aud.play(),vid1.play() ): (aud.pause(),vid1.pause());
aud.addEventListener('playing', () =>mdiv.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>mdiv.style.animationPlayState = 'paused');

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

/*函数：关键帧动画状态切换*/
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); /*获得歌词数组*/
})();
</script>

klxf 发表于 2024-12-21 19:41:23

挺好，若再顺畅一些会更好，谢谢醉美管理员精彩分享:)

醉美水芙蓉 发表于 2024-12-21 20:06:53

klxf 发表于 2024-12-21 19:41
挺好，若再顺畅一些会更好，谢谢醉美管理员精彩分享

感觉还可以了！

翁奕童苑 发表于 2024-12-30 16:37:07

支持！！！！前排！！！！

页: [1]

查看完整版本: 《人生何处不相逢》