测试一下admin老师的动画代码,特效动画,纳兰音画网,音画设计分享诗词朗诵音乐欣赏播放器设计论坛 - Bbs.CnzV.cC

亚伦影音工作室 发表于 2025-1-6 19:42:21

测试一下admin老师的动画代码

本帖最后由亚伦影音工作室于 2025-1-8 06:51 编辑 <br /><br /><style>
   #papa{margin: 10px -260px;
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 1s ease-in-out ; /* 基础转场效果 */
   }

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

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

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

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

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

   @keyframes slideRightEffect {
         from { transform: translateX(-100%); }50%{ transform: translateX(0); }
         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)}
}
#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']; // 转场效果列表

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

   setInterval(changeWallpaper, 5000); // 每5秒切换一次壁纸
</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>

醉美水芙蓉 发表于 2025-1-6 19:51:29

欣赏亚伦老师的精彩音画！

醉美水芙蓉 发表于 2025-1-6 19:52:12

精彩的播放器制作,画画很美,曲调旋律优美,美了醉了.......

醉美水芙蓉 发表于 2025-1-6 19:53:00

风景这里独好,在这里停留,驻足,欣赏,流连忘返......

admin 发表于 2025-1-6 21:36:18

漂亮！！！！

klxf 发表于 2025-1-8 12:51:32

本帖最后由 klxf 于 2025-1-8 12:57 编辑

谢谢亚伦老师精彩分享，效果挺好，也可控
若有控制按钮、可全屏、可加视频或动图就更完美了:)

页: [1]

纳兰音画网's Archiver

测试一下admin老师的动画代码