焱鑫磊 发表于 2023-3-14 11:39

《想你想不够》天籁天 DJ

<style>
#papa { margin: 90px 0 0 calc(50% - 650px); width: 1164px; height: 640px; background: lightblue url('http://tuku.link/imgs/2023/03/07abc8cd50643d0d.jpg') center/cover no-repeat; box-shadow: 6px 3px 30px #000;position: relative; display: grid; place-items: center; z-index: 1; }
#mplayer { width: 100px; height: 100px;top: 120px;left: 120px;border-radius: 50%; background: lightblue; box-shadow: 5px 5px 30px black inset; cursor: pointer; animation: rot2d 8s infinite linear var(--state); position: absolute; transition: box-shadow .6s; --state: running; }
#mplayer::before, #mplayer::after { position: absolute; content: ''; top: -50px; right: -50px; bottom: -50px; left: -50px; border: 6px dotted snow; border-radius: inherit; transform: perspective(1000px) rotateY(45deg) rotateX(15deg); animation: rot3d 10s infinite linear; --angle: 360deg; }
#mplayer:hover { box-shadow: 5px 5px 60px blue inset; }
#mplayer::after { top: -60px; right: -60px; bottom: -60px; left: -60px; --angle: -1080deg; }
#papa:fullscreen #mplayer { width: 150px; height: 150px; }
#papa:fullscreen #mplayer::before { top: -70px; right: -70px; bottom: -70px; left: -70px; }
#papa:fullscreen #mplayer::after { top: -80px; right: -80px; bottom: -80px; left: -80px; }
@keyframes rot2d { to { transform: rotate(360deg); } }
@keyframes rot3d { to { transform: perspective(1000px) rotateY(45deg) rotateX(15deg) rotateZ(var(--angle)); } }

#lrc { --motion: cover1; --tt: 5s; --state: paused; position: absolute; left: 350px; top: 540px; font: bold 2.6em sans-serif; color: hsl(0, 10%, 90%); -webkit-background-clip: text; filter: drop-shadow(1px 1px 2px hsla(0, 0%, 0%, .95)); }
#lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: pre; background: linear-gradient(180deg, hsla(60, 90%, 50%, .45), hsla(50, 90%, 50%, .6), hsla(0, 100%, 50%, .75)); 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%; } }

</style>

<div id="papa">
        <div id="lrc" data-lrc="花潮lrc在线">花潮lrc在线</div>
      <div id="mplayer"></div>
      <div id="btnFs">全屏观赏</div>
      <audio id="aud" src="https://www.joy127.com/url/101476.mp3" autoplay loop></audio>
</div>

<script>
(function() {
      let total = 18, fs = false, timerId, boxTimer;
      for(i = 0; i < total; i++) {
                let span = document.createElement('span');
                span.className = 'ball';
                span.style.cssText += `                     
                        transform: rotate(${60/total*i}deg) translate(320px);
                        animation: flash ${Math.random()+0.6}s infinite alternate var(--state);
                `;
                mplayer.appendChild(span);
      }
       let flash = () => {
                clearTimeout(boxTimer);
                papa.style.setProperty('--boxsd', `
                        ${Math.random()*100 - 250}px 0 60px #${Math.random().toString(16).substr(-6)},   
                        ${Math.random()*100 - 150}px 0 60px #${Math.random().toString(16).substr(-6)}`);
                boxTimer = setTimeout(flash,620);
      };
      let mState = () => aud.paused ? (papa.style.setProperty('--state','paused'), clearTimeout(boxTimer),lrc.style.setProperty('--state','paused')) : (papa.style.setProperty('--state','running'), flash(),lrc.style.setProperty('--state','running'));
      mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
      aud.addEventListener('play', () => mState());
      aud.addEventListener('pause', () => mState());

      aud.addEventListener('ended', () => playNext());
      

      papa.addEventListener('mousemove', (e) => {
                clearTimeout(timerId);
                btnFs.style.display = 'block';
                timerId = setTimeout('btnFs.style.display = "none"', 3000);
      });
      btnFs.addEventListener('click', () => fs ? document.exitFullscreen() : papa.requestFullscreen());
      document.addEventListener('fullscreenchange', () => document.fullscreenElement !== null ? (fs = true, btnFs.innerText = '退出全屏') : (fs = false, btnFs.innerText = '全屏观赏'));

        let mKey = 0, mFlag = true;

let lrcAr = [
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
       aud.addEventListener('timeupdate', () => {

                for (j = 0; j < lrcAr.length; j++) {
                        if (aud.currentTime >= lrcAr) {
                              if (mKey === j) showLrc(lrcAr);
                              else continue;
                        }
                }
      });
       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>

<div style="width: 100%;height: 60px;">&nbsp;</div>

巫荣云师 发表于 2023-3-14 19:43

欣赏收藏老师的[音乐专辑]好看又好听，点赞！

焱鑫磊 发表于 2023-3-14 21:37

巫荣云师 发表于 2023-3-14 19:43
欣赏收藏老师的[音乐专辑]好看又好听，点赞！

巫荣云师晚上好！{:1_292:}

蓝魔 发表于 2023-3-14 21:52

欣赏一下，谢谢。

焱鑫磊 发表于 2023-3-15 13:36

蓝魔 发表于 2023-3-14 21:52
欣赏一下，谢谢。
问候老师好！{:1_292:}

糊图花 发表于 2023-7-3 16:13

一环内

糊图花 发表于 2023-7-3 16:13

问好！{:1_292:}

糊图花 发表于 2023-7-3 16:13

欣赏佳作来了    

糊图花 发表于 2023-7-3 16:14

精彩，好听

糊图花 发表于 2023-7-3 16:14

学习，点赞 {:1_293:}
页: [1] 2
查看完整版本: 《想你想不够》天籁天 DJ