论坛 › 动画音画 › 想变啥都可以

亚伦影音工作室 发表于 2023-12-13 23:41

想变啥都可以

本帖最后由 亚伦影音工作室 于 2023-12-14 11:24 编辑 <br /><br /><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/64e9ee70661c6c8e544cd94a.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: 10px; height:10px; border-radius: 10% 0%;background: tan;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/a538796a7afde0e209029790618d0c83.mp3" autoplay loop></audio>
</div>

<script>

(function() {

let all = 160;
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 = `小阿枫 - 爱江山更爱美人 (3D环绕版)
道不尽红尘奢恋
诉不完人间恩怨
世世代代都是缘
流着相同的血
喝着相同的水
这条路漫漫又长远
红花当然配绿叶
这一辈子谁来陪
渺渺茫茫来又回
往日情景再浮现
藕虽断了丝还连
轻叹世间事多变迁
爱江山更爱美人
哪个英雄好汉宁愿孤单
好儿郎浑身是胆
壮志豪情四海远名扬
人生短短几个秋啊
不醉不罢休
东边儿我的美人儿
那西边儿黄河流
来呀来个酒啊
啊不醉不罢休
愁情烦事别放心头
红花当然配绿叶
这一辈子谁来陪
渺渺茫茫来又回
往日情景再浮现
藕虽断了丝还连
轻叹世间事多变迁
爱江山更爱美人
哪个英雄好汉宁愿孤单
好儿郎浑身是胆
壮志豪情四海远名扬
人生短短几个秋
啊不醉不罢休
东边我的美人
那西边黄河流
来呀来个酒啊
不醉不罢休
愁情烦事别放心头
愁情烦事别放心头`;

/*变量 ：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>

红影 发表于 2023-12-14 09:03

这个和最开始的圆球形状差不多呢，只是变成方形的也需要考虑粒子的方向需要朝向运动方向呢{:4_187:}

红影 发表于 2023-12-14 09:06

应该还能变成三角形、菱形等各种简单形状，变成复杂点的形状应该代码会多点，倒也不算多，都只是在那一句里的变化而已{:4_173:}

红影 发表于 2023-12-14 09:07

亚伦老师的尝试很赞，开拓了思路，让做出的帖子更美了{:4_199:}

红影 发表于 2023-12-14 09:08

相比较而言，还是那个细长的更好看呢{:4_173:}

幸运草 发表于 2023-12-14 09:13

介个有点纷乱，再小点可能更好看{:6_228:}

查看完整版本: 想变啥都可以