亚伦影音工作室 发表于 2025-1-8 21:23

火红的萨日朗

<style>
      #papa{margin: 10px -280px;
        width: 1400px;
        height: 740px;
        background:url('https://pic1.imgdb.cn/item/65db15629f345e8d03a78591.jpg') no-repeat center/cover;
        box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000;
        position: relative;overflow: hidden;
        z-index: 12345;}

      #wallpaper {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            transition: background-image 0s ease-in-out ; /* 基础转场效果 */
      }

      /* 定义不同的转场效果 */
      .fade {
            animation: fadeEffect 2s forwards ;
      }

      @keyframes fadeEffect {
            from { opacity: 0; }
            to { opacity: 1; }
      }

      .slide-left {
            animation: slideLeftEffect 2s forwards ;
      }

      @keyframes slideLeftEffect {
            from { transform: translateX(100%); }
            to { transform: translateX(0); }
      }


      .slide-right {
            animation: slideRightEffect 2s forwards ;
      }

      @keyframes slideRightEffect {
            from { transform: translateX(-100%); }
            to { transform: translateX(0); }
      }
.photo {animation: round 3s forwards;}
@keyframes round {0% {opacity: 1; transform:translate(0%,0%)scale(0)rotate(360deg);}
50% {opacity: 1;transform:translate(0%,0%)scale(1);}
100% {opacity: 1; transform:translate(0%,0%)scale(1);}
}
.huid {animation: yuoyu 3s forwards;}
@keyframes yuoyu {0% {opacity: 1; clip-path: ellipse(0% 00% at 50% 50%);}

30% {opacity: 1;clip-path: ellipse(50% 50% at 50% 50%);}
60% {opacity: 1; clip-path: ellipse(100% 100% at 50% 50%)}
100% {opacity: 1; clip-path: ellipse(100% 100% at 50% 50%)}
}
.guid {animation: guoyu 3s forwards;}
@keyframes guoyu {0% {opacity: 1; clip-path: circle(0 at 50% 100%);}
50% {opacity: 1; clip-path: circle(100% at 50% 100%);}
100% {opacity: 1; clip-path: circle(100% 100% at 50% 50%)}
}
.wguid {animation: wguoyu 3s forwards;}
@keyframes wguoyu {0% {opacity: 1; clip-path:circle(0% at 130% 50%);}
50% {opacity: 1; clip-path: circle(100% at 50% 100%);}
100% {opacity: 1; clip-path: circle(100% 100% at 50% 50%)}
}
.wmuid {animation: wmuoyu 3s forwards;}
@keyframes wmuoyu {0% {opacity: 1;transform:scale(0.8)scale3d(0,0,-300) skew(0,70deg);}
50% {opacity: 1;transform:scale(1);}
100% {opacity: 1;transform:scale(1)}
}
.wmvd {animation: wmyu 3s forwards;}
@keyframes wmyu {0% {opacity: 1;transform:scale(1,0);}
50% {opacity: 1;transform:scale(1);}
100% {opacity: 1;transform:scale(1)}
}
.wmvo {animation: wmyuo 3s forwards;}
@keyframes wmyuo {0% {opacity: 1;transform:scale(0,1);}
50% {opacity: 1;transform:scale(1);}
100% {opacity: 1;transform:scale(1)}
}
.wmv {animation: wmy 2s forwards;}
@keyframes wmy {0% {opacity: 1;transform:scale(4);}
50% {opacity: 1;transform:scale(1);}
100% {opacity: 1;transform:scale(1)}
}
.wmva {animation: wmya 2s forwards;}
@keyframes wmya {0% {opacity: 1;transform:scale(0);}
50% {opacity: 1;transform:scale(1);}
100% {opacity: 1;transform:scale(1)}
}
.bwmva {animation: brightnessIn 3s forwards;}
@keyframes brightnessIn {
    0% {opacity: 1;clip-path:polygon(0 50%, 50% 50%, 50% 0, 50% 0, 50% 50%, 100% 50%, 100% 50%, 50% 50%, 50% 100%, 50% 100%, 50% 50%, 0 50%);}
50%{
opacity: 1;clip-path:polygon(0 50%, 0 0, 50% 0, 50% 0, 100% 0, 100% 50%, 100% 50%, 100% 100%, 50% 100%, 50% 100%, 0 100%, 0 50%);}
100%{
opacity: 1;clip-path:polygon(0 50%, 0 0, 50% 0, 50% 0, 100% 0, 100% 50%, 100% 50%, 100% 100%, 50% 100%, 50% 100%, 0 100%, 0 50%);}
}
.bovap {animation: brig 3s forwards;}
@keyframes brig {0% {opacity: 1;transform:scale(1);clip-path:inset(50% 50% 50% 50%);}
50% {opacity: 1;transform:scale(1);clip-path:inset(0% 0% 0% 0%);}
100% {opacity: 1;clip-path:inset(0% 0% 0% 0%);}
}

#lrc{left: 10%;top: 75%;}#lrcc {left: 90%;transform: translate(-102%);top: 85%;}
#lrc,#lrcc{--state: paused;--motion: cover2;--tt: 2s;--bg:linear-gradient(89deg, #EE0000 12%,#078504 35%,#060344 65%,#DE0000 90%);border:0px solid black;position: absolute;z-index: 6;font:normal 3.2em 华文新魏;color: #222222;white-space: pre;-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 -1px 0);z-index: 15;}
#lrcc::before,#lrc::before {position: absolute;content: attr(data-lrc);width: 100%;height: 100%;color: transparent;overflow: hidden;white-space: pre;background: var(--bg); clip-path: inset(0% 100% 0 0); -webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}
@keyframes cover1 {to { clip-path: inset(0 0% 0 0);}}@keyframes cover2 {to { clip-path: inset(0 0 0 0);}}

    </style>
<div id="papa">
    <div id="wallpaper"></div>
<audio id="aud" src="http://music.163.com/song/media/outer/url?id=1942740960.mp3" loop autoplay></audio>
<div id="lrc" data-lrc=""></div>
<div id="lrcc" data-lrc=""></div>
</div>
<script>
papa.onclick = () => aud.paused ? aud.play() : aud.pause();
wallpaper.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>wallpaper.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>wallpaper.style.animationPlayState = 'paused');
</script>

    <script>
      const wallpaper = document.getElementById('wallpaper');
      const images = [
            'url(https://pic1.imgdb.cn/item/67334a1bd29ded1a8c90061b.jpg)',
            'url(https://pic1.imgdb.cn/item/6732a9bed29ded1a8cf916f5.webp)',
            'url(https://pic1.imgdb.cn/item/6732aa3bd29ded1a8cf96a8e.webp)',
'url(https://pic1.imgdb.cn/item/67767ca4d0e0a243d4edd98c.jpg)',
            'url(https://pic1.imgdb.cn/item/6775f8d6d0e0a243d4ed9e3e.jpg)',
            'url(https://pic1.imgdb.cn/item/6775f82ed0e0a243d4ed9e1f.jpg)',
'url(https://pic1.imgdb.cn/item/67715fd0d0e0a243d4ec3386.jpg)',
            'url(https://pic1.imgdb.cn/item/67715fc5d0e0a243d4ec3384.png)',
            'url(https://pic1.imgdb.cn/item/67715fb8d0e0a243d4ec337e.png)'

            // 添加更多图片路径
      ];
      let currentIndex = 0;
      const effects = ['fade', 'slide-left', 'slide-right', 'photo', 'huid', 'guid', 'wguid', 'wmuid', 'wmvd', 'wmvo', 'wmv', 'wmva', 'bwmva', 'bovap']; // 转场效果列表

      function changeWallpaper() {
      currentIndex = (currentIndex + 1) % images.length;
            const effect = effects; // 随机选择一个转场效果
            wallpaper.classList.remove(...effects); // 移除所有可能的类名
            wallpaper.classList.add(effect); // 添加新的转场效果类名
            wallpaper.style.backgroundImage = images;
      }

      setInterval(changeWallpaper, 4000); // 每4秒切换一次壁纸
    </script>
<span id="lrcStr" style="visibility: hidden;">
作词 : 红星海
作曲 : 红星海
编曲 : 红星海
草原最美的花 火红的萨日朗
一梦到天涯遍地是花香
流浪的人啊心上有了她
千里万里也会 回头望
天下有多大 随它去宽广
大路有多远 幸福有多长
听惯了牧马人悠扬的琴声
爱上这水草丰美的牧场
花开一抹红 尽情的怒放
河流有多远 幸福有多长
习惯了游牧人自由的生活
爱人在身边随处是天堂
草原最美的花 火红的萨日朗
一梦到天涯遍地是花香
流浪的人啊心上有了她
千里万里也会 回头望
草原最美的花 火红的萨日朗
火一样热烈 火一样奔放
痴情的人啊心上有了她
有种幸福叫地久天长
天下有多大 随它去宽广
大路有多远 幸福有多长
听惯了牧马人悠扬的琴声
爱上这水草丰美的牧场
花开一抹红 尽情的怒放
河流有多远 幸福有多长
习惯了游牧人自由的生活
爱人在身边随处是天堂
草原最美的花 火红的萨日朗
一梦到天涯遍地是花香
流浪的人啊心上有了她
千里万里也会 回头望
草原最美的花 火红的萨日朗
火一样热烈 火一样奔放
痴情的人啊心上有了她
有种幸福叫地久天长
草原最美的花 火红的萨日朗
一梦到天涯遍地是花香
流浪的人啊心上有了她
千里万里也会 回头望
草原最美的花 火红的萨日朗
火一样热烈 火一样奔放
痴情的人啊心上有了她
有种幸福叫地久天长
</span>
<script >
(function() {
/*变量 ：mKey - 当前歌词索引；averAdd ：平均值补偿*/
let mKey = 0,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 arr="";
      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) => {
      lrca=lrcAr;
      lrcAr.length==mKey+1?lrcb="":lrcb=lrcAr;//判断最后一句歌词
      let Y=String(mKey/2).indexOf(".");
      if (Y == -1)
    {
      0==mKey&&(lrc.innerHTML=lrca);
      lrc.dataset.lrc = lrca;
    lrcc.innerHTML = lrcb;
      lrcc.dataset.lrc = "";
      lrc.style.setProperty('--motion', 'cover1');
      lrc.style.setProperty('--tt', time + 's');
      lrc.style.setProperty('--state', 'running');
    lrcc.style.setProperty('--motion', 'cover2');
      }
    else
    {
      lrc.innerHTML = lrcb;
      lrcc.dataset.lrc = lrca;
      lrc.dataset.lrc = "";
    lrcc.style.setProperty('--motion', 'cover1');
      lrcc.style.setProperty('--tt', time + 's');
      lrcc.style.setProperty('--state', 'running');
    lrc.style.setProperty('--motion', 'cover2');
      }
      mKey += 1;
};
/*函数 ：处理当前歌词索引 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"),lrcc.style.setProperty("--state","paused")):(lrc.style.setProperty("--state","running"),lrcc.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.innerHTML); /*获得歌词数组*/
})();
</script>


liumang 发表于 2025-1-9 17:38

亚伦老师这个图片转换效果自然流畅{:5_150:}
页: [1]
查看完整版本: 火红的萨日朗