醉美水芙蓉 发表于 2022-10-29 13:59

紫荆花盛开

本帖最后由 醉美水芙蓉 于 2022-10-29 14:03 编辑 <br /><br /><style>
      #papa { left:-214px; width: 1024px; height: 640px; background: #ccc url('https://s1.ax1x.com/2022/10/29/x5VluR.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; display: grid; place-items: center; user-select: none; position: relative; z-index: 1; }
      #mplayer { position: absolute; width: 50px; height: 50px; left: 20px; top: 20px; border-radius: 50%; background: conic-gradient(hsla(0,100%,50%,.7),hsla(120,100%,50%,.7),hsla(240,100%,50%,.7),hsla(300,100%,50%,.7)); mask: radial-gradient(transparent 3px,red 0); -webkit-mask: radial-gradient(transparent 3px,red 0); cursor: pointer; animation: rot 4s linear infinite; animation-play-state: paused; }
      #lrc { --motion: cover1; --tt: 5s; --state: paused; position: absolute; top: 15px; font: bold 2.4em sans-serif; color: hsl(0,10%,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(120,85%,40%,.75),hsla(0,70%,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); } }
</style>

<div id="papa">
      <img src=" " alt="" style="position: absolute; left: 25px; top: 8px; mix-blend-mode: multiply;" />
      <div id="lrc" data-lrc="花潮论坛lrc在线">花潮论坛lrc在线</div>
      <div id="mplayer"></div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1959528822.mp3" autoplay= "autoplay"></audio>

<script>
let mKey = 0, mFlag = true;
let lrcAr = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
aud.loop = false;
mplayer.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 >= lrcAr) {
                        if (mKey === j) showLrc(lrcAr);
                        else continue;
                }
      }
});
let mState = () => aud.paused ? (mplayer.style.animationPlayState = 'paused', lrc.style.setProperty('--state', 'paused')) : (mplayer.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-29 14:57

欣赏、点赞

红影 发表于 2022-10-29 15:12

小光盘的按钮也漂亮，欣赏水芙蓉美女好帖{:4_187:}

醉美水芙蓉 发表于 2022-10-29 15:27

起个网名好难 发表于 2022-10-29 14:57
欣赏、点赞

谢谢老师欣赏支持！

醉美水芙蓉 发表于 2022-10-29 15:27

红影 发表于 2022-10-29 15:12
小光盘的按钮也漂亮，欣赏水芙蓉美女好帖

谢谢红影鼓励！

红影 发表于 2022-10-29 19:50

醉美水芙蓉 发表于 2022-10-29 15:27
谢谢红影鼓励！

水芙高产呢，做了这么多好帖{:4_187:}

樵歌 发表于 2022-10-29 20:55

欣赏水芙蓉美贴！这是香紫荆广场上那铜铸的巨大花瓣吧。

醉美水芙蓉 发表于 2022-10-29 20:57

樵歌 发表于 2022-10-29 20:55
欣赏水芙蓉美贴！这是香紫荆广场上那铜铸的巨大花瓣吧。

樵歌晚上好！是香紫荆广场上铜铸的巨大花瓣！

相约爱晚亭 发表于 2022-10-30 07:49

欣赏音画佳作！

醉美水芙蓉 发表于 2022-10-30 11:41

相约爱晚亭 发表于 2022-10-30 07:49
欣赏音画佳作！
谢谢老师支持！

马黑黑 发表于 2022-10-30 12:45

很精美，赞个

醉美水芙蓉 发表于 2022-10-30 16:50

马黑黑 发表于 2022-10-30 12:45
很精美，赞个

谢谢黑黑老师光临点评！

樵歌 发表于 2022-10-30 21:10

醉美水芙蓉 发表于 2022-10-29 20:57
樵歌晚上好！是香紫荆广场上铜铸的巨大花瓣！

很漂亮的。我那次去在那里也拍了
页: [1]
查看完整版本: 紫荆花盛开