论坛 › 欢乐水吧 › 五首梦之旅歌曲选听 （学习黑黑老师“花下醉”效果）

亦是金 发表于 2023-2-26 14:42

五首梦之旅歌曲选听 （学习黑黑老师“花下醉”效果）

本帖最后由 亦是金 于 2023-7-2 13:32 编辑 <br /><br /><!--https://www.huachaowang.com/forum.php?mod=viewthread&tid=66872-->
<!--L:\ysj147（★不要删除）\20220222\★创业云\2022\试贴\★马黑黑\★★ 花下醉（4首）-->



<div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_1846546">
<i class="pstatus"> 五首梦之旅歌曲选听（学习黑黑老师“花下醉”效果）</i><br /><br />
<style>
#papa {
        margin: 10px 0 0 calc(50% - 493px);
        width: 1024px;
        height: 640px;
        background: lightblue url('https://s4.ax1x.com/2022/02/20/HOqLUH.jpg') no-repeat center/cover;
        box-shadow: 3px 3px 20px #000;
        position: relative;
        user-select: none;
        z-index: 1;
        --state: paused;
        --opa: 1;
}
#papa::before, #papa::after {
        position: absolute;
        content: '';
        width: 50%;
        height: 100%;
        background: url('https://s1.ax1x.com/2023/03/02/ppFrxG8.jpg') no-repeat center/cover;
        opacity: var(--opa);
        transition: opacity 1.2s;
}
#papa::after { left: 50%; transform: rotateY(180deg); }
#papa:hover { --opa: 0; }
#papa:fullscreen { animation: flash 8s linear infinite alternate; }

#fly {
        position: absolute;
        left: 0;
        width: 360px;
        height: 200px;
        animation: fly 100s infinite alternate var(--state);
}



.mplayer {
        --tt: 10s;
        position: absolute;
        left: 10px;
        top: 20px;
        width: 120px;
        height: 120px;
        border-radius: 50%;
        transform:perspective(1000px) rotateX(0deg) rotateY(20deg);
        animation: rot var(--tt) infinite var(--state);
        cursor: pointer;
        transition: .45s;
}
.mplayer:hover { filter: drop-shadow(0 0 80px green) brightness(200%); }

#drunken {
        position: absolute;
        bottom: 30px;
        left: 13%;
        mix-blend-mode: multiply;
        cursor: pointer;<!--下一曲按钮位置-->
}
#btnFs {
        position: absolute;
        left: 45%;
        transform: translate(-50%);
        bottom: 20px;
        width: fit-content;
        height: fit-content;
        padding: 6px;
        border-radius: 6px;
        border: 2px solid snow;
        color: snow;
        display: none;
        cursor: pointer;<!--全屏按钮位置-->
}
@keyframes rot { to { transform: perspective(1000px) rotateX(0deg) rotateY(20deg) rotateZ(-360deg); } }
@keyframes fly { to { left: calc(50% - 360px); } }
</style>

<div id="papa">
        <div id="fly">
                <img class="mplayer" src="https://s1.ax1x.com/2023/02/28/ppCT07F.png" alt="" />

        </div>
        <img id="drunken" src="https://s1.ax1x.com/2023/02/26/ppp27fU.png" title="下一首" alt="" />
        <div id="btnFs">全屏观赏</div>
</div>
<audio id="aud"></audio>

<script>
(function() {
        let fs = false, timerId;
        let ypAr = ['9066675','38617129','38317561','261554061','38617370'];
        let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        let playNext = () => {
                aud.src = '
                aud.src = 'https://www.qqmc.com/mp3/music' + ypAr + '.mp3';
                aud.play();
        }
        let btns = document.querySelectorAll('.mplayer');
        [...btns].forEach((item) => item.onclick = () => aud.paused ? aud.play() : aud.pause());
        aud.addEventListener('play', () => mState());
        aud.addEventListener('pause', () => mState());
        aud.addEventListener('ended', () => playNext());
        drunken.addEventListener('click', () => playNext());
        btnFs.addEventListener('click', () => fs ? document.exitFullscreen() : papa.requestFullscreen());
        document.addEventListener('fullscreenchange', () => document.fullscreenElement !== null ? (fs = true, btnFs.innerText = '退出全屏') : (fs = false, btnFs.innerText = '全屏观赏'));
        papa.addEventListener('mousemove', (e) => {
                clearTimeout(timerId);
                btnFs.style.display = 'block';
                timerId = setTimeout('btnFs.style.display = "none"', 3000);
        });
        playNext();
})();
</script>
</td></tr></table>

亦是金 发表于 2023-2-26 14:50

学习黑黑老师“花下醉”效果，改用了酷我音乐链接！向黑黑老师致敬！{:4_191:}

亦是金 发表于 2023-2-26 14:56

本帖最后由 亦是金 于 2023-2-26 15:36 编辑

盼望黑黑老师修改代码，在画面中能即时显示演唱的歌曲名称！期待中！！！{:4_191:}

亦是金 发表于 2023-2-26 15:05

本帖选择了梦之旅演唱歌曲五首， 上海滩 ；月圆花好；茶山情歌；传奇；山不转水转。

马黑黑 发表于 2023-2-26 15:46

亦是金 发表于 2023-2-26 14:50
学习黑黑老师“花下醉”效果，改用了酷我音乐链接！向黑黑老师致敬！

{:5_108:}

马黑黑 发表于 2023-2-26 15:46

画面唯美

樵歌 发表于 2023-2-26 18:01

选的好歌好美女。{:4_173:}

亦是金 发表于 2023-2-26 18:55

樵歌 发表于 2023-2-26 18:01
选的好歌好美女。

{:4_173:}谢谢欣赏！问好！{:4_191:}

红影 发表于 2023-2-26 19:01

这个漂亮，把喝酒图改成文字方式替换歌曲，倒也更明确，还结合了那个鼠标划过换图片的效果。欣赏亦是金老师好帖{:4_187:}

亦是金 发表于 2023-2-26 19:06

红影 发表于 2023-2-26 19:01
这个漂亮，把喝酒图改成文字方式替换歌曲，倒也更明确，还结合了那个鼠标划过换图片的效果。欣赏亦是金老师 ...

谢谢红影点评！问好！{:4_204:}

小辣椒 发表于 2023-2-26 20:56

亦是金好快的，已经做出来了{:4_199:}

小辣椒 发表于 2023-2-26 20:57

欣赏亦是金好制作{:4_178:}

红影 发表于 2023-2-26 21:13

亦是金 发表于 2023-2-26 19:06
谢谢红影点评！问好！

有自己的设计比单纯套用又高个层次{:4_187:}

亦是金 发表于 2023-2-26 21:15

小辣椒 发表于 2023-2-26 20:56
亦是金好快的，已经做出来了

问好小辣椒，谢谢欣赏！{:4_204:}

庶民 发表于 2023-2-27 05:17

美好的作品是一壶酒，喝者醉人，嗅者醉心；

梦缘 发表于 2023-2-27 10:54

感谢分享，好听的歌曲。{:4_204:}

亦是金 发表于 2023-2-28 22:00

庶民 发表于 2023-2-27 05:17
美好的作品是一壶酒，喝者醉人，嗅者醉心；

问好庶民朋友！谢谢欣赏！{:4_191:}

亦是金 发表于 2023-2-28 22:01

梦缘 发表于 2023-2-27 10:54
感谢分享，好听的歌曲。

问好梦缘女！谢谢欣赏点赞！{:4_204:}

查看完整版本: 五首梦之旅歌曲选听 （学习黑黑老师“花下醉”效果）