论坛 › 欢乐水吧 › 当痴人落入凡间

醉美水芙蓉 发表于 2022-10-18 20:58

当痴人落入凡间

<style>
#papa { left: -214px; width: 1024px; height: 640px; background: teal url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/live/67abb300d336db76d0a5f5a8f70ffeaa.mp4.jpg') no-repeat center/cover; display: grid; place-items: center; overflow: hidden; position: relative; z-index: 1; }
#btnplay { --dur: 10s; position: absolute;left:55px; top: 50%; width: 40px; height: 40px; font: bold 40px/40px serif; text-align: center; color: red; cursor: pointer; animation: rot linear var(--dur) infinite; }
.mpic { position: absolute; left: 1024px; top: 100px; width: 120px; mix-blend-mode: multiply; animation: fly linear 40s infinite; }
#lrc { --motion: cover1; --tt: 1s; --state: paused; position: absolute; top: 15px; font: bold 2.4em sans-serif; color: hsl(0,100%,90%); -webkit-background-clip: text; filter: drop-shadow(1px 1px 2px hsla(0,100%,0%,.85)); }
#lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: nowrap; background: linear-gradient(180deg,hsla(0,100%,50%,.75),hsla(60,100%,50%,.65)); 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(360deg); } }
@keyframes fly { to { left: -120px; } }
</style>

<div id="papa">
      <img class="mpic" src="https://638183.freep.cn/638183/t22/hl/kite1.gif" alt="" />
      <span id="btnplay">&#127800;</span>
      <span id="lrc" data-lrc="当痴人落入凡间">当痴人落入凡间</span>
</div>
<audio id="aud" src="https://www.qqmc.com/up/kwlink.php?id=243468758&.mp3" autoplay= "autoplay"></audio>

<script>
(function() {
      let mKey = 0, mFlag = true, slip = 0.5;
       let lrcAr = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
      aud.loop = false;
      btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
      aud.addEventListener('pause', () => mState());
      aud.addEventListener('play', () => mState());
      aud.addEventListener('ended', () => { mKey = 0; aud.play(); });
      aud.addEventListener('timeupdate', () => {
                for (j = 0; j < lrcAr.length; j++) {
                        if (aud.currentTime - slip >= lrcAr) {
                              if (mKey === j) showLrc(lrcAr);
                              else continue;
                        }
                }
      });
      let mState = () => aud.paused ? (btnplay.style.animationPlayState = 'paused', lrc.style.setProperty('--state', 'paused')) : (btnplay.style.animationPlayState = '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;
      };
})();
</script>

千羽 发表于 2022-10-18 21:08

水芙蓉这图做得太好了。背景图好漂亮，学做的效果也很到位必须点赞{:4_187:}{:4_199:}

小辣椒 发表于 2022-10-18 21:09

欣赏水芙蓉的精美制作{:4_204:}

小辣椒 发表于 2022-10-18 21:11

黑黑这个小动图也是漂亮的

醉美水芙蓉 发表于 2022-10-18 21:15

千羽 发表于 2022-10-18 21:08
水芙蓉这图做得太好了。背景图好漂亮，学做的效果也很到位必须点赞

谢谢千羽美女支持！

醉美水芙蓉 发表于 2022-10-18 21:16

小辣椒 发表于 2022-10-18 21:09
欣赏水芙蓉的精美制作

谢谢小辣椒支持鼓励！

红影 发表于 2022-10-18 21:18

这个特殊字符选得漂亮，欣赏水芙蓉美女好帖{:4_187:}

醉美水芙蓉 发表于 2022-10-18 21:19

红影 发表于 2022-10-18 21:18
这个特殊字符选得漂亮，欣赏水芙蓉美女好帖

谢谢红影美女支持鼓励！

马黑黑 发表于 2022-10-18 21:34

来看看天上痴人{:4_170:}

醉美水芙蓉 发表于 2022-10-18 21:37

马黑黑 发表于 2022-10-18 21:34
来看看天上痴人

黑黑老师晚上好！

相约爱晚亭 发表于 2022-10-18 21:41

欣赏音画佳作！

醉美水芙蓉 发表于 2022-10-18 22:18

相约爱晚亭 发表于 2022-10-18 21:41
欣赏音画佳作！
老师晚上好！

红影 发表于 2022-10-18 22:50

醉美水芙蓉 发表于 2022-10-18 21:19
谢谢红影美女支持鼓励！

这首歌还是头一次听呢，好听{:4_187:}

马黑黑 发表于 2022-10-18 22:58

醉美水芙蓉 发表于 2022-10-18 21:37
黑黑老师晚上好！

{:4_190:}

查看完整版本: 当痴人落入凡间