论坛 › 欢乐水吧 › 人间独宠

醉美水芙蓉 发表于 2023-3-11 22:35

人间独宠

<style>#papa {
        --state: paused; --deg: 1turn;
        margin: 90px 0 0 calc(60% - 649px);
        display: grid;
        place-items: center;
        width: 1024px;
        height: 640px;
        background: lightblue url('https://pic.imgdb.cn/item/640c8c41f144a01007971121.jpg') no-repeat center/cover;
        box-shadow: 6px 3px 20px #000;
        user-select: none;
        position: relative;
        z-index: 1;
}
#btnFs {
        position: absolute;
        left: 20px;
        width: fit-content;
        height: fit-content;
        padding: 6px;
        border-radius: 6px;
        border: 2px solid lightblue;
        color: lightblue;
        text-shadow: 1px 1px 1px #000;
        display: none;
        cursor: pointer;
}
#mplayer {
        position: absolute;
                left:100px
                top:100px
        background: yellow;
        box-shadow: -10px -10px 30px blue inset;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        cursor: pointer;
        animation: rot linear 3s infinite var(--state);
        position: relative;
}
#mplayer::before, #mplayer::after {
        position: absolute;
        content: '';
        width: 40px;
        height: 40px;
        top: 50px;
        box-shadow:
                100px 100px 30px red,
                -100px 100px 30px navy,
                100px -100px 30px orange,
                -100px -100px 30px olive;
        animation: rot linear 3s infinite var(--state);
}
#mplayer::after { --deg: -2turn; top: -50px;}
#lrc { --motion: cover1; --tt: 5s; --state: paused; position: absolute; left: 300px; bottom: 30px; font: bold 2.4em sans-serif; color: hsl(20, 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(100, 90%, 50%, .45), hsla(80, 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%; } }
@keyframes rot { to { transform: rotate(var(--deg)); } }
</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/101289.mp3" autoplay="" loop=""></audio></div>
<script>(function() {
        let fs = false, timerId;

        let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : '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>

红影 发表于 2023-3-11 23:10

这歌曲真好听，水芙蓉的制作好漂亮{:4_187:}

醉美水芙蓉 发表于 2023-3-11 23:11

红影 发表于 2023-3-11 23:10
这歌曲真好听，水芙蓉的制作好漂亮

谢谢红影美女支持！

马黑黑 发表于 2023-3-11 23:26

好漂亮

醉美水芙蓉 发表于 2023-3-12 05:32

马黑黑 发表于 2023-3-11 23:26
好漂亮

老师哪句代码是移动播放器的？我想把那中间的球移动一下！

庶民 发表于 2023-3-12 05:34

很漂亮的，点赞。

醉美水芙蓉 发表于 2023-3-12 07:02

庶民 发表于 2023-3-12 05:34
很漂亮的，点赞。

老师早上好！

樵歌 发表于 2023-3-12 07:57

好学上进！{:4_187:}

马黑黑 发表于 2023-3-12 08:38

醉美水芙蓉 发表于 2023-3-12 05:32
老师哪句代码是移动播放器的？我想把那中间的球移动一下！

你改造的 #mplayer 选择器代码如下：

#mplayer {
        position: absolute;
       left:100px
      top:100px
        background: yellow;
        box-shadow: -10px -10px 30px blue inset;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        cursor: pointer;
        animation: rot linear 3s infinite var(--state);
        position: relative;
}


红色两句是相互冲突的，后一句的设置会覆盖前一句的设置。这两句是定位属性语句，前一句使用绝对定位，后一句使用相对定位，最终元素是相对定位。应删掉后一句，这样，蓝色部分代码的具体定位就会有效（但具体数据不合理哦，要改一改）。

醉美水芙蓉 发表于 2023-3-12 17:53

庶民 发表于 2023-3-12 05:34
很漂亮的，点赞。

谢谢庶民老师支持！

醉美水芙蓉 发表于 2023-3-12 17:56

马黑黑 发表于 2023-3-12 08:38
你改造的 #mplayer 选择器代码如下：

#mplayer {


难怪我怎么改都没有反应，谢谢黑黑指点迷津！

醉美水芙蓉 发表于 2023-3-12 18:02

樵歌 发表于 2023-3-12 07:57
好学上进！

谢谢樵歌欣赏支持！

马黑黑 发表于 2023-3-12 18:03

醉美水芙蓉 发表于 2023-3-12 17:56
难怪我怎么改都没有反应，谢谢黑黑指点迷津！

{:4_190:}

红影 发表于 2023-3-12 19:56

醉美水芙蓉 发表于 2023-3-11 23:11
谢谢红影美女支持！

不客气，问好水芙蓉美女{:4_187:}

樵歌 发表于 2023-3-12 20:14

醉美水芙蓉 发表于 2023-3-12 18:02
谢谢樵歌欣赏支持！

美女不须客气了{:4_190:}

焱鑫磊 发表于 2023-3-13 02:02

哪个代码有问题呢？歌词不循环。

醉美水芙蓉 发表于 2023-3-13 06:37

焱鑫磊 发表于 2023-3-13 02:02
哪个代码有问题呢？歌词不循环。
问题多着呢！

查看完整版本: 人间独宠