人生导航 - 魏佳艺 - 动画音画 - 花潮论坛

亚伦影音工作室 发表于 2024-3-4 11:50

人生导航 - 魏佳艺

本帖最后由亚伦影音工作室于 2024-4-1 14:54 编辑 <br /><br /><style>
#papa{position: relative;width:1164px;height:620px;background:#000000 url(https://pic.imgdb.cn/item/65bf0270871b83018a3ad9aa.jpg)no-repeat center/cover;display: grid;place-items: center;overflow:hidden;margin-top:150px;margin-left: -300px;box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 8px #880000;z-index: 123456;}
audio {position:absolute;top:580px;z-index: 50;
width: 98%;
height: 40px;
outline: none;
filter: invert(180);
}
audio::-webkit-media-controls-enclosure {
background:transparent ;
border-radius: 4px;
}
.media-controls-container,
.media-controls-container * {
background: rgb(129, 73, 200);
//滤镜反转为 rgba(0, 162, 255, 1);rgba(255, 93, 0, 0.8)#7eb637
border-radius: 4px;
}

audio::-webkit-media-controls-current-time-display {
order: 1; //设置弹性盒对象元素的顺序
color: #ffffff;
text-shadow: unset;
}

audio::-webkit-media-controls-time-remaining-display {
order: 2;
color: #000000;
text-shadow: unset;
}

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

li-zi { position: absolute; top: -10px;z-index: 5; background: linear-gradient(to bottom, transparent, snow); animation: drop var(--dur) var(--delay) infinite linear var(--state); }
@keyframes drop { to { top: 100%; } }
</style>
<div id="papa">
<div id="testImg">
<div class='photo'> </div><div class='photo'> </div><div class='photo'> </div><div class='photo'> </div>
<div class='photo'> </div><div class='photo'> </div><div class='photo'> </div><div class='photo'> </div>
</div>
<audioid="aud" loop controls >
<source src="https://bzgz.club/view.php/8f865a8b1cd6414f814a0aa478700926.mp3" type="audio/mp3" /></audio>
<div id="lrc" data-lrc=""></div>
<div id="lrcc" data-lrc=""></div>
</div>
<script>
let autoplayPromise = aud.play(); // 命令video播放并获取Promise对象
(function(){
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>
<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>

<script>

var pa= document.querySelector('body');
var mState = () => aud.paused ?
(pa.style.setProperty('--state', 'paused')) :
(pa.style.setProperty('--state', 'running'));

aud.addEventListener('pause', () => mState());
aud.addEventListener('playing', () => mState());

Array.from({length: 200}).forEach((item) => {
item = document.createElement('li-zi');
item.style.cssText += `
--dur: ${0.5 + Math.random() * 0.5}s;
--delay: ${Math.random() * -0.8}s;
width: ${1 + Math.round(Math.random())}px;
height: ${8 + Math.random() * 30}px;
left: ${Math.random() * 100}%;
`;
papa.appendChild(item);
});
</script>
<style type="text/css">
.photo {width: 100%;
height: 100%;box-shadow: 0px 0px 0px 2px #ffffff;
position: absolute;z-index: -2;
transform: scale3d(0,0,-300) skew(0,70deg);
top:0px; left:0px;filter:contrast(120%)brightness(100%);
opacity: 0;
animation-name: round ;animation-duration: 48s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
}
@keyframes round {
5% {opacity: 1;transform:scale(0.8)}
10% {opacity: 1;transform:scale(1)}
13% {opacity: 1;transform:scale(1)}
18% {opacity: 0;transform:scale(3)}
}
.photo:nth-child(1) {background: url(https://pic.imgdb.cn/item/65db15889f345e8d03a7d9b2.jpg)no-repeat center/cover;
animation-delay: 42s;
}
.photo:nth-child(2) {background: url(https://pic.imgdb.cn/item/65db13539f345e8d03a32d0b.jpg)no-repeat center/cover;
animation-delay: 36s;
}
.photo:nth-child(3) {background: url(https://pic.imgdb.cn/item/65db15629f345e8d03a78591.jpg)no-repeat center/cover;
animation-delay: 30s;
}
.photo:nth-child(4) {background: url(https://pic.imgdb.cn/item/65db15639f345e8d03a787ea.jpg)no-repeat center/cover;
animation-delay: 24s;
}
.photo:nth-child(5) {background: url(https://pic.imgdb.cn/item/65db13fa9f345e8d03a48992.jpg)no-repeat center/cover;
animation-delay: 18s;
}
.photo:nth-child(6) {background: url(https://pic.imgdb.cn/item/658c0a24c458853aef9d89ab.jpg)no-repeat center/cover;
animation-delay: 12s;
}
.photo:nth-child(7) {background: url(https://pic.imgdb.cn/item/658c09d6c458853aef9c646b.jpg)no-repeat center/cover;
animation-delay: 6s;
}
.photo:nth-child(8) {background: url(https://pic.imgdb.cn/item/658c1095c458853aefb7e2e9.jpg)no-repeat center/cover;
animation-delay: 0s;
}
.stop .photo:nth-child(1) {
animation-delay: 42s;animation-play-state: paused;
}
.stop .photo:nth-child(2){
animation-delay: 36s;animation-play-state: paused;
}
.stop.photo:nth-child(3){
animation-delay: 30s;animation-play-state: paused;
}
.stop .photo:nth-child(4){
animation-delay: 24s;animation-play-state: paused;
}
.stop .photo:nth-child(5){
animation-delay: 18s;animation-play-state: paused;
}
.stop .photo:nth-child(6){
animation-delay: 12s;animation-play-state: paused;
}
.stop .photo:nth-child(7) {
animation-delay: 6s;animation-play-state: paused;
}
.stop .photo:nth-child(8) {
animation-delay: 0s;animation-play-state: paused;
}
</style>

红影发表于 2024-3-4 20:57

漂亮的制作，美丽的图片轮转和雨丝效果，而且能一键全控。
欣赏亚伦老师好帖{:4_199:}

马黑黑 发表于 2024-3-6 08:13

{:4_199:}

页: [1]

花潮论坛's Archiver

人生导航 - 魏佳艺