论坛 › 动画音画 › 曾经的你 - 许巍

亚伦影音工作室 发表于 2023-12-28 15:09

曾经的你 - 许巍

本帖最后由 亚伦影音工作室 于 2024-1-12 19:50 编辑 <br /><br /><style>
#papa {
      margin: 180px-300px;
      width: 1164px;
      height: 620px;
      background:#000000 url('https://pic.imgdb.cn/item/658d19f6c458853aef55c1ac.jpg')no-repeat center/cover;
      box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000; position: relative; overflow: hidden;
      display: grid;
      place-items: center;
      }

#lrc {
      --state: paused;
      --motion: cover2;
      --tt: 2s;
      --bg: linear-gradient(0deg, #ff0000, #ff0000, #ff0000);
      position: absolute;z-index: 6;
      left: 48%;
      transform: translate(-52%);
      top: 86%;
      font:normal 3em 华文新魏;
color: #000080;
      
      -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%;}}
#canv {display: block; position: absolute;width:100%; height: 200px; bottom: 0px; left: 0px;z-index:1 ; animation: sp 1s linear infinite;}
@keyframes sp {
      0% { filter:hue-rotate(360deg)contrast(150%)brightness(100%); }
}
#bt{width: 200px; overflow: hidden; color: lightgreen; position: absolute; left:10%;top:13%;font-size: 15px; z-index: 9;}

</style>

<div id="papa">

<css-doodle id="mplayer">
      :doodle {z-index:80 ;
                @grid: 2 / 260px 60px;
                position: absolute;
                color: var(--color);
                bottom: 87%;left: 5%;
                --prog: 0%; --size: 40px; --ttmsg1: '00:00'; --ttmsg2: '00:00'; --color: lightgreen; --state: paused;
      }
      /* 时间信息 : 左 */
      @nth(1) {
                @place: 10% 80%;
                :after { content: var(--ttmsg1); }
      }
      /* 控制器 */
      @nth(2) {
                @size: var(--size);
                @shape: clover @r(4,6);
                @place: 45% 35%;
                background: var(--color);
                animation: rot 6s infinite linear var(--state);
      }
      /* 时间信息 : 右 */
      @nth(3) {
                @place: 80% 80%;
                :after { content: var(--ttmsg2); }
      }
      /* 进度条 */
      @nth(4) {
                @place: 40% 80%;
                @size: 100% 2px;
                background: #bbb;
                display: grid;
                place-items: center start;
                :before {
                        content: '';
                        width: var(--prog);
                        height: 100%;
                        background: var(--color);
                }
      }
      @keyframes rot { to { transform: rotate(1turn); } }

</css-doodle>

<div id="眼睛">
      <div id="舞台">
                <span class="演员"></span>
                <span class="演员"></span>
                <span class="演员"></span>
                <span class="演员"></span>
                <span class="演员"></span>
                <span class="演员"></span>
      </div>
</div>

<div data-lrc="曾经的你 - 许巍" id="lrc">曾经的你 - 许巍</div>
<canvas id='canv' width="1200" height="250"></canvas>
<audio id="aud" src="https://www.qqmc.com/mp3/music237910.mp3" autoplay loop></audio>
<span id="bt">曾经的你 - 许巍</span>
</div>

<script>
(function() {
      let clickIdx = 0, progChg = 0, cursors = ['default','pointer','pointer'];
      let script = document.createElement('script');
      script.src = 'https://638183.freep.cn/638183/web/api/css-doodle.js';
      document.head.appendChild(script);
      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 = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
      aud.addEventListener('play', mState, false);
      aud.addEventListener('pause', mState, false);
      aud.addEventListener('timeupdate', () => {
                mplayer.style.setProperty('--ttmsg1', `'${toMin(aud.currentTime)}'`);
                mplayer.style.setProperty('--ttmsg2', `'${toMin(aud.duration)}'`);
                mplayer.style.setProperty('--prog',`${100 * aud.currentTime / aud.duration}%`)
      });

      mplayer.onclick = () => {
                if(clickIdx === 1) aud.paused ? aud.play() : aud.pause();
                if(clickIdx === 2) aud.currentTime = progChg;
      }
      mplayer.onmousemove = (e) => {
                let size = parseInt(window.getComputedStyle(mplayer).getPropertyValue('--size')), ww = mplayer.offsetWidth, hh = mplayer.offsetHeight;
                clickIdx = e.offsetY > hh/1.5 ? 2 : (e.offsetX > (ww - size)/2 && e.offsetX < (ww + size)/2 && e.offsetY < hh/1.5 ? 1 : 0);
                mplayer.style.cursor = cursors;
                if(clickIdx > 1) progChg = aud.duration * e.offsetX / ww;
      }
})();
</script>
<script >
(function() {
/*原始lrc歌词*/
let lrcStr = `曾经的你 - 许巍
词：许巍
曲：许巍
编曲：许巍
曾梦想仗剑走天涯
看一看世界的繁华
年少的心总有些轻狂
如今你四海为家
曾让你心疼的姑娘
如今已悄然无踪影
爱情总让你渴望又感到烦恼
曾让你遍体鳞伤
di li li li di li li li da da
di li li li di li li li da da
di li li li di li li li da da
走在勇往直前的路上
di li li li di li li li da da
di li li li di li li li da da
di li li li di li li li da da
有难过也有精彩
每一次难过的时候
就独自看一看大海
总想起身边走在路上的朋友
有多少正在疗伤
di li li li di li li li da da
di li li li di li li li da da
di li li li di li li li da da
不知多少孤独的夜晚
di li li li di li li li da da
di li li li di li li li da da
di li li li di li li li da da
从昨夜酒醉醒来
每一次难过的时候
就独自看一看大海
总想起身边走在路上的朋友
有多少正在醒来
让我们干了这杯酒
好男儿胸怀像大海
经历了人生百态世间的冷暖
这笑容温暖纯真
每一次难过的时候
就独自看一看大海
总想起身边走在路上的朋友
有多少正在醒来
让我们干了这杯酒
好男儿胸怀像大海
经历了人生百态世间的冷暖
这笑容温暖纯真`;

/*变量 ：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')) : (lrc.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); /*获得歌词数组*/
})();

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


<style>
#眼睛 {transform:scale(0.8);
      margin: 150px ;position: absolute;z-index: 6;
      left: 10%;
       perspective: 3000px;
      perspective-origin: 50% 40%;
}

#舞台 {
      position: relative;
      width: 300px;
      height: 300px;
      transform-style: preserve-3d;
      animation: spin 10s infinite linear;
      transform: rotateX(-15deg) rotateY(-15deg) rotateX(-15deg);
}

.演员 {
      position: absolute;
      width: 100%;
      height: 100%;
      display: grid;
      place-items: center;
      font: normal 2em arial sans-serif;
      opacity: 1;
}

.演员:nth-of-type(1) {
      background: url('https://pic.imgdb.cn/item/64fd5599661c6c8e5429c0e2.jpg')no-repeat center/cover;
      transform: translateZ(150px) rotateY(0deg);
}

.演员:nth-of-type(2) {
      background: url('https://pic.imgdb.cn/item/658c0a24c458853aef9d89ab.jpg')no-repeat center/cover;
      transform: translateZ(-150px) rotateY(0deg);
}

.演员:nth-of-type(3) {
      background: url('https://pic.imgdb.cn/item/658c09d6c458853aef9c646b.jpg')no-repeat center/cover;
      transform: translateX(-150px) rotateY(90deg);
}

.演员:nth-of-type(4) {
      background: url('https://pic.imgdb.cn/item/64f93f7e661c6c8e54359206.jpg')no-repeat center/cover;
      transform: translateX(150px) rotateY(90deg);
}

.演员:nth-of-type(5) {
      background:url('https://pic.imgdb.cn/item/64e9fa3f661c6c8e544f1b3a.jpg')no-repeat center/cover;
      transform: translateY(-150px) rotateX(90deg);
}

.演员:nth-of-type(6) {
      background: url('https://pic.imgdb.cn/item/64fd530c661c6c8e542948df.jpg')no-repeat center/cover;
      transform: translateY(150px) rotateX(90deg);
}

@keyframes spin {
      from { transform: rotateX(0) rotateY(0) rotateZ(0); }
      to { transform: rotateX(0deg) rotateY(360deg) rotateZ(360deg); }
}
</style>

老谟深虑 发表于 2023-12-28 15:55

          欣赏老师的佳作，点赞！

红影 发表于 2023-12-28 16:47

漂亮的六面体美人图，旋转的六面体和播放按钮都能控制音乐{:4_187:}

红影 发表于 2023-12-28 16:47

点赞，欣赏亚伦老师好帖{:4_199:}

樵歌 发表于 2023-12-28 20:01

这个做得更绝了，六面体都是美人儿。{:4_173:}

醉美水芙蓉 发表于 2023-12-28 21:42

亚伦影音工作室 发表于 2023-12-28 21:46

醉美水芙蓉 发表于 2023-12-28 21:42
老师可以加频谱吗？

可以!

侃大山 发表于 2023-12-29 18:38

漂亮{:4_204:}

侃大山 发表于 2023-12-29 18:39

这么多美人{:5_106:}

侃大山 发表于 2023-12-29 18:39

这歌听着熟悉。

查看完整版本: 曾经的你 - 许巍