亚伦影音工作室 发表于 2023-12-14 16:11

一半疯了一半算了

<style>
    #papa { margin: 0 0 0 calc(50% - 650px); width: 1164px; height: 620px; background: #000000 ; overflow: hidden; display: grid; place-items: center; box-shadow: 3px 6px 12px gray; position: relative; z-index: 1; --state: paused; }
#dh{ width: 100%; height: 100%; position: absolute;
z-index: 1;background:url(https://pic.imgdb.cn/item/64e0d36a661c6c8e541a39a5.jpg)no-repeat center/cover;
top:0px; left:0px;
animation: rod 2s linear infinite;}
@keyframes rod{0% {opacity: 1;filter:hue-rotate(360deg)}
50% {opacity: 0;}100% {opacity: 1;}
}

    #player { width: 220px; height: 220px; cursor: pointer; background: url('https://pic.imgdb.cn/item/65165dfcc458853aeff44557.png') no-repeat center/cover;animation: rotating 12s linear infinite var(--state); position: relative;z-index: 81;}
   
    li-zi { position: absolute;width: 20px; height: 20px; clip-path: polygon(52% 27%, 100% 50%, 48% 75%, 0% 100%, 30% 50%, 0% 0%);
       animation: imov 2s infinite;z-index: 2;}
    @keyframes moving {
         100%{ opacity: 1; transform: translate(var(--x0),var(--y0)) rotate(var(--deg)); filter:hue-rotate(360deg);}
      0%{ opacity: 0; transform: translate(0,0) rotate(var(--deg)); }
    }
    @keyframes rotating { to { transform: rotate(360deg); } }

#lrc {
      --state: paused;
      --motion: cover2;
      --tt: 2s;
      --bg: linear-gradient(0deg, #ff0000, #ff0000, #ff0000);
      position: absolute;z-index: 6;
      left: 52%;
      transform: translate(-50%);
      top: 480px;
      font:normal 3em 华文新魏;
      font-weight:400;
      color: #000080;
      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 -1px0);
}
#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{0% { width: 0%;}100% { width: 100%;}}
@keyframes cover2 { 0% { width: 0%;}100% { width: 100%;}}

</style>

<div id="papa">
    <div id="player" title="播放/暂停"></div>

<div id="dh" style="animation-play-state: running;"></div>
<div data-lrc="一半疯了一半算了" id="lrc" title="歌词显示">一半疯了一半算了</div>
    <audio id="aud" src="https://i.mp3.wf/view.php/860477b45d4808a21ef8d7bfdc739bef.mp3" autoplay loop></audio>
</div>

<script>

(function() {

let all = 200;
for(let i = 0; i < all; i++) {
    let movBall = document.createElement('li-zi');
    let hudu = Math.PI / 180 * 360 / all * i;
    let xx = 600 * Math.cos(hudu), yy = 600 * Math.sin(hudu);
    movBall.style.cssText += `
      --x0: ${xx}px;
      --y0: ${yy}px;
      --deg: ${360 / all * i}deg;
      background: #${Math.random().toString(16).substr(-6)};
      animation: moving ${Math.random() * 2 + 2}s -${Math.random() * 2}s infinite var(--state);
    `;
    papa.prepend(movBall);
}

let playMusic = () => aud.paused ? (aud.play(), player.title='暂停') : (aud.pause(), player.title='播放');
let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('playing',mState,false);
aud.addEventListener('pause',mState,false);
player.addEventListener('click',playMusic,false);

})();

</script>


<script>
(function() {
/*原始lrc歌词*/
let lrcStr = `一半疯了一半算了 - 南北组合
熙熙攘攘这命运的道场
谁曾燃起希望烧一片空旷
名利叫我迷惘
现实多肮脏
渐把真心去换成伪装
就怪那酒杯太浅 敬不了来日方长
巷子太短 走不到白发苍苍
人在世 半是运气 半是注定
成王败寇岁月证
不过一刹似流萤
就怪那岁催人老 贪不起一如既往
笑谈风霜 留一副冠冕堂皇
无奈我
半是大醉
半是眼泪
情仇恨爱里徘徊
醒觉以后皆梦碎
谁亦有过盛开心里希望
亦曾满载信念追赶于远方
多少心的滚烫开不出花香
有梦的人也许最迷茫
笑道生死都有命
别理他风声雨声
纸醉金迷也终于一天冷清
这一生一半疯了 一半算了
不是年少不疯狂 只是岁月太荒唐
雪月风花中进睡
弹指间光阴似水
谁曾年少
春风得意
舍我有谁
这一生一半疯了 一半算了
再对烈酒诉衷肠 只能说说旧时光
笑道生死都有命
别理他风声雨声
纸醉金迷也终于一天冷清
这一生一半疯了 一半算了
不是年少不疯狂 只是岁月太荒唐
雪月风花中进睡
弹指间光阴似水
谁曾年少
春风得意
舍我有谁
这一生一半疯了 一半算了
再对烈酒诉衷肠 只能说说旧时光`;

/*变量 ：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());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr); /*获得歌词数组*/
})();

dh.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>dh.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>dh.style.animationPlayState = 'paused');
</script>

bgmnet 发表于 2023-12-15 01:27

这音乐居然两种语言   牛逼666

liumang 发表于 2023-12-17 17:30

bgmnet 发表于 2023-12-15 01:27
这音乐居然两种语言   牛逼666

很多的，你才发现啊

liumang 发表于 2023-12-17 17:30

{:5_150:}{:5_150:}{:5_150:}

小辣椒 发表于 2023-12-26 22:42

欣赏亚伦的精彩特效代码制作{:5_150:}
页: [1]
查看完整版本: 一半疯了一半算了