论坛 › 欢乐水吧 › 手心里的温柔 - 刀郎

亚伦影音工作室 发表于 2024-10-18 13:15

手心里的温柔 - 刀郎

本帖最后由 亚伦影音工作室 于 2024-10-18 14:30 编辑 <br /><br /><style type="text/css">
#papa{
        position: relative;
        width: 1286px;
        height: 720px;
      margin-left:-300px;
        margin-top:10px;
        border: 1px solid rgba(36, 201, 219,.95);
      border-radius: 2px;
        background:#833;
        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 50s linear infinite;}
@keyframes round {0% {opacity: 1;clip-path:inset(0% 50% 0% 50%);
transform:translate(0%,0%)scale(1);}
3% {
opacity: 1;clip-path: inset(0 0 0 0);
transform:translate(0%,0%)scale(1);}
10% {
opacity: 1;clip-path: inset(0 0 0 0);
transform:translate(0%,0%)scale(1);}
23% {
opacity: 0;clip-path:inset(0 0 0 0);
transform:translate(0%,0%)scale(1);}
}

.vid:nth-child(1){animation-delay: 40s;}
.vid:nth-child(2){animation-delay: 30s;}
.vid:nth-child(3){animation-delay: 20s;}
.vid:nth-child(4) {animation-delay: 10s;}
.vid:nth-child(5) {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){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%;}}
</style >
<div id="papa" >
<video id="vid1" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/d60f37a3c35af392736cdfcb6b04f642_preview.mp4" loop muted autoplay=""></video>
<div id="testImg">
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/scene/db629b9fe028468e601ac622d9dbff02_preview.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/scene/73c95d0a1bb511e588ba3f3eddb44c92_preview.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/ff8c2b263ce04047fde08eb5fdae91f1_preview.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/6648b5e3e5a9f07b8fffd9689c73f4a5_preview.mp4" loop muted autoplay=""></video>
<video class="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/ab3c4dcdf625245d97ace90a0f262001_preview.mp4" loop muted autoplay=""></video>
</div>
<audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w9/audio/2c/87/32/ba6553bd63371ae2278151692c413526/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());
</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>

红影 发表于 2024-10-18 13:48

视频漂亮。亚伦老师的视频转场效果真好{:4_199:}

查看完整版本: 手心里的温柔 - 刀郎