醉美水芙蓉 发表于 2024-10-21 22:46:45

永不停歇的歌（Live 合唱版）

<style type="text/css">
#papa{
        position: relative;
        width: 1286px;
        height: 720px;
      margin-left:-200px;
        margin-top:100px;
        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 150s linear infinite;}
@keyframes round {0% {opacity: 0;}
4% {
opacity: 1;}
8% {
opacity: 1;}
10% {
opacity: 0;}
}
.vid:nth-child(1){animation-delay: 135s;}
.vid:nth-child(2){animation-delay: 120s;}
.vid:nth-child(3){animation-delay: 105s;}
.vid:nth-child(4) {animation-delay: 90s;}
.vid:nth-child(5) {animation-delay: 75s;}
.vid:nth-child(6){animation-delay: 60s;}
.vid:nth-child(7){animation-delay: 45s;}
.vid:nth-child(8){animation-delay: 30s;}
.vid:nth-child(9) {animation-delay: 15s;}
.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://img-baofun.zhhainiao.com/pcwallpaper_ugc/scene/c346c66421adef637d5ddccf37027487_preview.mp4" loop muted autoplay=""></video>
<div id="testImg">

<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/63/97/V-639792-778A7D27.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/scene/5dc7c8ce733524b9b336b8d4370dd2e1_preview.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/scene/7113b3d5fa78e24e3261166baa0f8cc5_preview.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/51/93/V-519399-1DE475A1.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/vcg/video/preview/51miz42N1062912640.mp4" loop muted autoplay=""></video>

<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/scene/8340f4640bd1b513fcc175ff8c28c190_preview.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/64/07/V-640733-3E217D3C.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/97/V-159729-022A6DFB.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://video-qn.51miz.com/preview/video/00/00/14/66/V-146637-19720D92.mp4" loop muted autoplay=""></video>
</div>
<audio id="aud" src="http://cccimg.com/view.php/cf3fca9c0fccabe04cf24fe56c00347f.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 = `永不停歇的歌（Live 合唱版）-王笔锋
作词：刘子祥
作曲：刘子祥
编曲：艺朵朵音乐
混音：惠永平
出品人：刘子祥
LRC编辑：醉美水芙蓉
那是在北方的天空下
人们说罗刹海市太复杂
我一个人独自守候在
凌晨两点的伤心秀吧
爱是你我曾说过的话
翩翩的情人她又去了哪
手心里的温柔不再有
是对年少冲动的惩罚
2002 年的第一场雪
敖包相会的小伙他已成家
谢谢你送我的黄玫瑰
在喀什葛尔的胡杨树下
那曾经雨中飘荡的回忆
身披彩衣的姑娘你还好吗
西海情歌冰雪已融化
驼铃又响起我白了头发
爱是你我曾说过的话
翩翩的情人她又去了哪
手心里的温柔不再有
是对年少冲动的惩罚
2002 年的第一场雪
敖包相会的小伙他已成家
谢谢你送我的黄玫瑰
在喀什葛尔的胡杨树下
那曾经雨中飘荡的回忆
身披彩衣的姑娘你还好吗
西海情歌冰雪已融化
驼铃又响起我白了头发
2002 年的第一场雪
敖包相会的小伙他已成家
谢谢你送我的黄玫瑰
在喀什葛尔的胡杨树下
那曾经雨中飘荡的回忆
身披彩衣的姑娘你还好吗
西海情歌冰雪已融化
驼铃又响起我白了头发
谢谢欣赏！
`;

/*变量 ：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>

翁奕童苑 发表于 2024-10-31 13:16:36

这个作品漂亮！！！！

肖浅 发表于 2024-11-12 23:37:33

这个作品漂亮！！！！

klxf 发表于 2024-11-14 20:33:07

真漂亮！谢谢醉美版主精彩分享:)

确认过眼神 发表于 3 天前

这个作品漂亮！！！！
页: [1]
查看完整版本: 永不停歇的歌（Live 合唱版）