醉美水芙蓉 发表于 2026-10-19 18:06:25

傲雷影儿动感人像美图《红帷梦宋》

<style>
#papa {
      margin: 0px 0 0 calc(-380px);
      width: 1700px;
      height: 900px;
      background: lightgreen url('1') no-repeat center/cover;
      box-shadow: 3px 3px 5px #333;
      position: relative;
}

.inmg { position:absolute; width:100%; height: 900px;TOP:0%;LEFT: 0%;}

#mplayer {
      position: absolute;
      width: 70px;
      height: 70px;
      right: 810px;
      top: 77%;
      border-radius: 50%;
      cursor: pointer;
      animation: rot 8s linear infinite;
}
#lrc {position: absolute;top: 780px;left: 50%;
      --state: paused;
      --motion: cover2;
      --tt: 2s;
      --bg: linear-gradient(180deg, hsla(120, 96%, 60%, .85), hsla(120, 95%, 95%, .85));
      transform: translate(-50%);
      font: bold 2.6em sans-serif;
      color: snow;
      white-space: pre;
      -webkit-background-clip: text;
      filter: drop-shadow(1px 1px 2px hsla(0, 0%, 0%, .95));
}
#lrc::before {
      position: absolute;
      content: attr(data-lrc);
      width: 20%;
      height: 100%;      
      color: transparent;
      overflow: hidden;
      white-space: pre;
      background: var(--bg);
      filter: inherit;
      -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%; } }
@keyframes rot { to { transform: rotate(1turn); } }


</style>

<div id="papa">

<marqueeid="m" behavior="alternate"scrollamount="5"height=900>
<img alt="" src="https://www.junzhuan.com/data/attachment/album/202609/25/152050eggvv99wwyou6699.jpg" title="" style="width: 1600px;height: 900px;" /><img alt="" src="https://www.junzhuan.com/data/attachment/album/202609/25/152050bz1zhj4w5q0c0m21.jpg" title="" style="width: 1600px;height: 900px;;"/><img alt=""src="https://www.junzhuan.com/data/attachment/album/202609/25/152050clb44zyx4oon7n4o.jpg" title="" style="width: 1600px;height: 900px;" /><img alt="" src="https://www.junzhuan.com/data/attachment/album/202609/25/152051s5zntptiby9hkbry.jpg" title=""style=" width: 1600px;height: 900px;" /><img alt=""src="https://www.junzhuan.com/data/attachment/album/202609/25/152051y88ew4y1aa3h8v8y.jpg" title="" style="width: 1600px;height: 900px;"/><img alt=""src="https://www.junzhuan.com/data/attachment/album/202609/25/152051uczqyqgzeippaspz.jpg" title=""style=" width: 1600px;height: 900px;"/><img alt="" src="https://www.junzhuan.com/data/attachment/album/202609/25/152052gpfyplf8kpzzrk8r.jpg" title="" style="width: 1600px;height: 900px;" /><img alt="" src="https://www.junzhuan.com/data/attachment/album/202609/25/152052nr5ywueeh5yhzyqy.jpg" title=""style=" width: 1600px;height: 900px;" />
</marquee>

<marqueeclass="inmg" direction="down" height="550" behavior="alternate" id="m4" style="transform: rotateY(180deg);"><marqueeid="m1" scrollamount="15"><imgsrc="https://www.junzhuan.com/data/attachment/album/202407/17/170250n28zjee922af2kwj.gif"height="30" /></marquee></marquee>

<marqueeclass="inmg" direction="down"
height="550"
behavior="alternate"
id="m3"><marquee id="m2" scrollamount="23" ><imgsrc="https://www.junzhuan.com/data/attachment/album/202407/17/170250n28zjee922af2kwj.gif"height="30" /></marquee></marquee>

      <div id="lrc" data-lrc="HCPlayer">HCPlayer</div>
      <img id="mplayer" src="https://www.junzhuan.com/data/attachment/album/202607/24/154838f823cilev8uibu78.png" alt="" />
      <audio id="aud" src="https://music.163.com/song/media/outer/url?id=5281253.mp3" loop autoplay></audio>
</div>
<script>
(function() {
/*原始lrc歌词*/
let lrcStr = `问情-蔡幸娟
作词 : 陈乐融
作曲 : Iskandar Ismai
编曲 : Ricky Ho
制作：傲雷影儿
山川载不动太多悲哀
岁月经不起太长的等待
春花最爱向风中摇摆
黄沙偏要将痴和怨掩埋
一世的聪明情愿糊涂
一生的遭遇向谁诉
爱到不能爱 聚到总须散
繁华过后成一梦啊
海水永不干 天也望不穿
红尘一笑和你共徘徊
山川载不动太多悲哀
岁月经不起太长的等待
春花最爱向风中摇摆
黄沙偏要将痴和怨掩埋
一世的聪明情愿糊涂
一生的遭遇向谁诉
爱到不能爱 聚到总须散
繁华过后成一梦啊
海水永不干 天也望不穿
红尘一笑和你共徘徊
……
一世的聪明情愿糊涂
一生的遭遇向谁诉
爱到不能爱 聚到总须散
繁华过后成一梦啊
海水永不干 天也望不穿
红尘一笑和你共徘徊
爱到不能爱 聚到总须散
繁华过后成一梦啊
海水永不干 天也望不穿
红尘一笑和你共徘徊
`;
/*变量 ：mKey - 当前歌词索引；mFlag ：调用关键帧动画索引；averAdd ：平均值补偿*/
let mKey = 0, mFlag = true, 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 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) => {
      let name = mFlag ? 'cover1' : 'cover2';
      lrc.innerHTML = lrcAr;
      lrc.dataset.lrc = lrcAr;
      lrc.style.setProperty('--motion', name);
      lrc.style.setProperty('--tt', time + 's');
      lrc.style.setProperty('--state', 'running');
      mKey += 1;
      mFlag = !mFlag;
};

/*函数 ：**当前歌词索引 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 toMin = (val) => {
      if (!val) return '00:00';
      val = Math.floor(val);
      let min = parseInt(val / 60),
      sec = parseFloat(val % 60);
      if (min < 10) min = '0' + min;
      if (sec < 10) sec = '0' + sec;
      return min + ':' + sec;
}

/*函数 ：关键帧动画状态切换*/
let mState = () => aud.paused ? (lrc.style.setProperty('--state','paused'),mplayer.style.animationPlayState = 'paused') : (lrc.style.setProperty('--state','running'),mplayer.style.animationPlayState = '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());/*监听查询事件*/
mplayer.addEventListener('click', () => { aud.paused ? aud.play() : aud.pause(); });

let lrcAr = getLrcAr(lrcStr); /*获得歌词数组*/
})();
</script>

klxf 发表于 2026-10-19 22:47:43

好听好看，谢谢友友精彩分享

醉美水芙蓉 发表于 7 天前

klxf 发表于 2026-10-19 22:47
好听好看，谢谢友友精彩分享

谢谢友友光临！
页: [1]
查看完整版本: 傲雷影儿动感人像美图《红帷梦宋》