醉美水芙蓉 发表于 2023-7-17 21:41

云菲菲 - 与岁月把盏

本帖最后由 醉美水芙蓉 于 2023-7-17 21:41 编辑 <br /><br /> <style>
#mydiv { margin: 0 0 0 calc(50% - 693px); width: 1202px; height: 676px; background: url('https://pic.imgdb.cn/item/64b53fa11ddac507cc5fd063.jpg') no-repeat center/cover; box-shadow: 0 0 8px 0 #000; opacity: .95; overflow: hidden; z-index: 1; position: relative; --state: paused; }
#lrc { position: absolute; top: 10px; left: 50%; transform: translate(-50%); font: bold 2.4em sans-serif; color: hsl(0,10%,90%); -webkit-background-clip: text; filter: drop-shadow(1px 1px 2px hsla(0,0%,0%,.95)); --motion: cover2; --tt: 5s; }
#lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: nowrap; background: linear-gradient(180deg,hsla(60,100%,50%,.45),hsla(0,100%,50%,.75)); filter: inherit; -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards var(--state); }
pinpu-wrapper {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
    cursor: pointer;
}
pinpu-wrapper { position: absolute; bottom: 0; left: 50%; transform: translate(-50%); cursor: pointer; }
pin-pu { position: absolute; bottom: 0; animation: pinpuMotion var(--du) var(--delay) infinite alternate linear var(--state);}
.mybox { position: absolute; bottom: -100px; left: calc(50% - 25px); font-size: 50px; animation: up 8s var(--delay) infinite linear var(--state); --delay: 0s; --deg: 5deg; }
.mybox:nth-of-type(2) { --delay: -2s; --deg: -5deg; }
.mybox:nth-of-type(3) { --delay: -4s; --deg: -15deg; }
.mybox:nth-of-type(4) { --delay: -6s; --deg: -15deg; }
@keyframes pinpuMotion { from { height: 0px; } to { height: var(--height); } }
@keyframes up { to { transform: rotate(var(--deg)) translateY(-740px); } }
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
</style>

<div id="mydiv">
      <span class="mybox">&#127880;</span>
      <span class="mybox">&#127880;</span>
      <span class="mybox">&#127880;</span>
    <span class="mybox">&#127880;</span>
      <pinpu-wrapper></pinpu-wrapper>
      <div id="lrc"data-lrc="花潮lrc在线">花潮lrc在线</div>
</div>
<audio id="aud"src="https://www.qqmc.com/mp3/music263046857.mp3" autoplay loop></audio>

<script>

~function() {
      let pinpuNum = 60, pinpuWidth = 4, pinpuHeight = 160, mKey = 0, mFlag = true, slip = 0.2;
      let ppwrap = document.querySelector('pinpu-wrapper');
       let lrcAr = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
      let mState = () => aud.paused ? (mydiv.style.setProperty('--state','paused'), lrc.style.setProperty('--state','paused')) : (mydiv.style.setProperty('--state','running'), lrc.style.setProperty('--state','running'));
      let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrc.dataset.lrc = lrcAr;lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');lrc.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};
      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 msort = (ar) => {let newAr = [];ar.forEach((v,k) => k % 2 === 0 ? newAr.unshift(v) : newAr.push(v));return newAr;}
      ~function() {let ar = Array.from(Array(pinpuNum), (v,k) => pinpuNum - k -1);Array.from({length: pinpuNum}).forEach((item,key) => {item = document.createElement('pin-pu');item.style.cssText += `width: ${pinpuWidth}px;left: ${(pinpuWidth + 2) * key}px;background: #${Math.random().toString(16).substr(-6)};--height: ${15 + (pinpuHeight - 15) / pinpuNum * msort(ar)}px;--du: ${Math.random() * .3 + .3}s;--delay: -${Math.random()}s;`;ppwrap.appendChild(item);});ppwrap.style.height = `${pinpuHeight}px`;ppwrap.style.width = `${(pinpuWidth + 2) * pinpuNum}px`;}();
      aud.addEventListener('play', mState, false);
      aud.addEventListener('pause', mState, false);
      aud.addEventListener('seeked', calcKey, false);
      aud.addEventListener('timeupdate', () => {
      for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime >= lrcAr + slip) {cKey = j;if (mKey === j) showLrc(lrcAr);else continue;}}});
      ppwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
}();

</script>

小辣椒 发表于 2023-7-17 21:47

欣赏水芙蓉精彩制作，你直接套用了吧{:4_189:}

千羽 发表于 2023-7-17 21:51

来欣赏学习芙蓉的精美制作，一切都是美美哒{:4_187:}

醉美水芙蓉 发表于 2023-7-17 21:53

小辣椒 发表于 2023-7-17 21:47
欣赏水芙蓉精彩制作，你直接套用了吧

想改树叶的，没有改成？

醉美水芙蓉 发表于 2023-7-17 21:54

千羽 发表于 2023-7-17 21:51
来欣赏学习芙蓉的精美制作，一切都是美美哒

问候千羽，这个比较难，直接套用代码做了一个！

小辣椒 发表于 2023-7-17 21:56

醉美水芙蓉 发表于 2023-7-17 21:53
想改树叶的，没有改成？

不急，慢慢来{:4_179:}

花飞飞 发表于 2023-7-17 22:15

太好了，水芙蓉的贴子美女都赏心悦目{:4_170:}还超级清晰。。

红影 发表于 2023-7-17 22:15

好漂亮的制作。欣赏水芙蓉美女好帖{:4_199:}

醉美水芙蓉 发表于 2023-7-17 22:21

花飞飞 发表于 2023-7-17 22:15
太好了，水芙蓉的贴子美女都赏心悦目还超级清晰。。

谢谢朋友欣赏支持！

醉美水芙蓉 发表于 2023-7-17 22:22

红影 发表于 2023-7-17 22:15
好漂亮的制作。欣赏水芙蓉美女好帖

谢谢红影欣赏支持！

红影 发表于 2023-7-17 23:07

醉美水芙蓉 发表于 2023-7-17 22:22
谢谢红影欣赏支持！

问好水芙蓉美女，晚上好{:4_187:}
页: [1]
查看完整版本: 云菲菲 - 与岁月把盏