醉美水芙蓉 发表于 6 天前

半身风雨半身伤

<style>
#papa{position: relative;width:1164px;height:620px;background:#000000 url(https://www.junzhuan.com/data/attachment/album/202408/27/101202hztrjnfnxmvtmmfr.jpg)no-repeat center/cover;overflow:hidden;margin-top:30px;margin-left: -150px;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://www.junzhuan.com/data/attachment/album/202408/27/101159rp3z3e5bdee85z9w.jpg"></a>
      <a href class="zxx-slide-a"><img class="zxx-slide-img" src="https://www.junzhuan.com/data/attachment/album/202408/27/101201owba1rzo21osfw1s.jpg"></a>
      <a href class="zxx-slide-a"><img class="zxx-slide-img" src="https://www.junzhuan.com/data/attachment/album/202408/27/101200ij8e7y8q7qzxbbix.jpg"></a>
      <a href class="zxx-slide-a"><img class="zxx-slide-img" src="https://www.junzhuan.com/data/attachment/album/202408/27/101202hztrjnfnxmvtmmfr.jpg"></a>
<a href class="zxx-slide-a"><img class="zxx-slide-img" src="https://www.junzhuan.com/data/attachment/album/202408/27/101200th8mfnnkhq5lneeh.jpg"></a>
<a href class="zxx-slide-a"><img class="zxx-slide-img" src="https://www.junzhuan.com/data/attachment/album/202408/27/101201k3o1f68iq17zzc7l.jpg"></a>
</zxx-slide>

<audioid="aud" loop controls autoplay>
<source src="https://music.163.com/song/media/outer/url?id=2103737754" /></audio>
<div id="lrc" data-lrc=""></div>
<div id="lrcc" data-lrc=""></div>       
</div>

<span id="lrcStr" style="visibility: hidden;">
半身风雨半身伤
演唱：杜歌
作词：张卫东
作曲：李风持
编曲：风行天下
和声：风行天下
混音：风行天下
出品人：霸气
LRC编辑：醉美水芙蓉
回首来时的路几度沮丧
跌跌撞撞四处流浪
曾经豪情万丈如今叹花黄
年少轻狂冲撞江湖道场
风雪漫灌的心几多迷茫
为米奔忙无暇思故乡
举杯对饮月光无处话凄凉
人海跌宕饮尽世间沧桑
我已半身风雨半身伤
青丝无情变白霜
眉间的波浪染透惆怅
不再逞强真想大哭一场
我已半身风雨半身伤
指尖溜走好时光
今生还想再混出个模样
所有伤痛只能自己来扛
风雪漫灌的心几多迷茫
为米奔忙无暇思故乡
举杯对饮月光无处话凄凉
人海跌宕饮尽世间沧桑
我已半身风雨半身伤
青丝无情变白霜
眉间的波浪染透惆怅
不再逞强真想大哭一场
我已半身风雨半身伤
指尖溜走好时光
今生还想再混出个模样
所有伤痛只能自己来扛
我已半身风雨半身伤
青丝无情变白霜
眉间的波浪染透惆怅
不再逞强真想大哭一场
我已半身风雨半身伤
指尖溜走好时光
今生还想再混出个模样
所有伤痛只能自己来扛
谢谢欣赏！
</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(3);}
   
100% {filter: brightness(1);}
}

</style>

klxf 发表于 4 天前

视听盛宴，谢谢醉美版主精彩分享:)

醉美水芙蓉 发表于 4 天前

klxf 发表于 2024-11-17 11:19
视听盛宴，谢谢醉美版主精彩分享

谢谢友友支持！
页: [1]
查看完整版本: 半身风雨半身伤