人生短短三万天

亚伦影音工作室 发表于 2024-11-15 16:48

本帖最后由亚伦影音工作室于 2024-11-16 20:31 编辑 <br /><br /><style>
#papa{position: relative;width:1164px;height:620px;background:#000000 url(https://pic.imgdb.cn/item/65bf0270871b83018a3ad9aa.jpg)no-repeat center/cover;overflow:hidden;margin-top:10px;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: 15%;top: 75%;}#lrcc {left: 85%;transform: translate(-102%);top: 85%;}
#lrc,#lrcc{--state: paused;--motion: cover2;--tt: 2s;--bg:#880000;border:0px solid black;position: absolute;z-index: 2;font:normal 2.5em 华文隶书;color: #000078;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);}
#lrcc::before,#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 {from {width: 0;}to {width: 100%;}}@keyframes cover2 {from {width: 0;}to {width: 100%;}}
</style>
<div id="papa">

<zxx-slide >
<a href class="zxx-slide-a" ><img class="zxx-slide-img" src="https://pic.imgdb.cn/item/671d8e6dd29ded1a8cbf3d68.jpg"></a>
   <a href class="zxx-slide-a"><img class="zxx-slide-img" src="https://pic.imgdb.cn/item/671d8d6ed29ded1a8cbe9b99.jpg"></a>
   <a href class="zxx-slide-a"><img class="zxx-slide-img" src="https://pic.imgdb.cn/item/67162d45d29ded1a8c2fc41d.jpg"></a>
   <a href class="zxx-slide-a"><img class="zxx-slide-img" src="https://pic.imgdb.cn/item/67162491d29ded1a8c210f14.jpg"></a>
<a href class="zxx-slide-a"><img class="zxx-slide-img" src="https://pic.imgdb.cn/item/6716290ed29ded1a8c299351.jpg"></a>
<a href class="zxx-slide-a"><img class="zxx-slide-img" src="https://pic.imgdb.cn/item/66fb8420f21886ccc0a62fe3.webp"></a>
</zxx-slide>

<audioid="aud" loop controls autoplay>
<source src="https://s2.ananas.chaoxing.com/sv-w9/audio/84/4a/00/bec7caf2d33f8b2e4e57ae1fc0294984/audio.mp3" type="audio/mp3" /></audio>
<div id="lrc" data-lrc=""></div>
<div id="lrcc" data-lrc=""></div>
</div>

<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); /*获得歌词数组*/
})();

var eleZxxSlides = document.querySelectorAll('zxx-slide');
[].slice.call(eleZxxSlides).forEach(function (container) {
var timerSlide = null;
var indexSlide = 0;
container.addEventListener('mouseover', function () {
   clearTimeout(timerSlide);
});
container.addEventListener('mouseout', function () {
   clearTimeout(timerSlide);
   funSlide();
});
// 对应的元素
var eleSlides = [].slice.call(container.querySelectorAll('a'));
var eleButtons = [].slice.call(container.querySelectorAll('button'));

var funSlide = function() {
   eleSlides.forEach(function (slide, index) {
         if(!aud.paused) {
            if (indexSlide == index) {
               slide.classList.add('in');

            } else if (slide.classList.contains('in')) {
               slide.classList.remove('in');
            }
         }
   });

   timerSlide = setTimeout(function () {
         indexSlide++;
         if (indexSlide == eleSlides.length) {
            indexSlide = 0;
         }
         funSlide();
   }, 5000);
}

indexSlide++;
setTimeout(funSlide, 5000);
});

</script>
<style >
zxx-slide {
width: 100%; height: 100%;
position: absolute;
}
.zxx-slide-a {cursor: default;
   pointer-events:none;
position: absolute;

}
.zxx-slide-a.in {z-index: 1;
animation-duration: 3s; animation-name: brightnessIn;
}
.zxx-slide-img {

width: 100%; height: 100%;
}

@keyframes brightnessIn {
0% {filter: brightness(2);}

100% {filter: brightness(1);}
}

</style>

红影发表于 2024-11-15 16:57

又是一种新的图片轮播方式呢，轮播中带着亮度的变化。
欣赏亚伦老师好帖{:4_199:}

红影发表于 2024-11-15 16:58

歌曲非常有道理，人生短短，要学会随意坦然{:4_187:}

夕阳黄昏 发表于 2024-11-15 17:11

梦油发表于 2024-11-15 17:31

欣赏佳作，问候亚伦。

樵歌发表于 2024-11-15 19:00

欣赏亚伦老师精彩帖子。

秋思梦景 发表于 2024-11-15 19:53

问候老师好！精美音画佳作，精心制作分享。欣赏点赞！{:5_108:}{:4_204:}{:5_116:}

小辣椒 发表于 2024-11-16 15:27

亚伦好制作，必须赞的~~

小辣椒提一点建议，可以不可以图片转换速度减缓一点，现在有点突然一变的感觉

页: [1]

花潮论坛's Archiver

人生短短三万天