论坛 › 欢乐水吧 › 猴子捞月

绿叶清舟 发表于 2023-3-2 11:57

猴子捞月

本帖最后由 绿叶清舟 于 2023-3-2 12:04 编辑 <br /><br /><style>
#papa {
        --state: paused;
        margin: -80px 0 0 calc(50% - 633px);
        width: 1100px;
        height: 700px;
        background: lightblue url('https://pic.imgdb.cn/item/64001e81f144a01007224e88.jpg') no-repeat center/cover;
        box-shadow: 6px 3px 20px #000;
        overflow: hidden;
        position: relative;
        z-index: 1;
}
.moon {
        position: absolute;
        width: 100px;
        height: 100px;
        left: calc(50% - 50px);
        cursor: pointer;
        z-index: 999;
}
.moon::before, .moon::after {
        position: absolute;
        content: '';
        border-radius: 50%;
}
.moon::before {
        width: 80px;
        height: 80px;
        background: transparent;
        box-shadow: 20px 10px 0 snow;
        animation: swing linear 2s infinite alternate var(--state);
}
.moon::after {
        background: LemonChiffon;
        width: 30px;
        height: 30px;
        left: 35px;
        top: 35px;
}
.reflect {
        bottom: 50px;
      left: 680px;
      color: LemonChiffon;
        filter: blur(1.2px) opacity(.55);
        transform: rotateX(-180deg);
}
.star {
        position: absolute;
        background: LemonChiffon;
        box-shadow: 0 0 2px white inset;
        opacity: 0;
        filter: blur(.5px);
        display: block;
}
#btnFs {
        position: absolute;
        left: 20px;
        bottom: 20px;
        width: fit-content;
        height: fit-content;
        padding: 6px;
        border-radius: 6px;
        border: 2px solid snow;
        color: snow;
        display: none;
        cursor: pointer;
}
@keyframes swing { to { transform: rotate(45deg); } }
@keyframes flash { to { transform: rotate(45deg); opacity: .6; } }
</style>

<div id="papa">
        <div class="moon"></div>
        <div class="moon reflect"></div>
        <div id="btnFs">全屏观赏</div>
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1300595102.mp3" autoplay loop></audio>
</div>

<script>
(function() {
        let moons = document.querySelectorAll('.moon'), fs = false, timerId;
        for(let j = 0; j < 600; j ++) {
                let star = document.createElement('span'), size = Math.ceil(Math.random() * 4);
                star.className = 'star';
                star.style.cssText += `
                        left: ${Math.random() * 100}%;
                        top: ${Math.random() * 50}%;
                        width: ${size}px;
                        height: ${size}px;
                        animation: flash 1s ${Math.random() * 20}s infinite alternate var(--state);
                `;
                papa.appendChild(star);
        }
        let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        moons.forEach((item) => item.onclick = () => aud.paused ? aud.play() : aud.pause());
        aud.addEventListener('play', () => mState());
        aud.addEventListener('pause', () => mState());
        aud.addEventListener('ended', () => playNext());
        aud.addEventListener('error', () => {
                if(aud.error.code === 4) aud.src = 'http://www.kumeiwp.com/sub/filestores/2023/02/26/f8e9ca01f8ae47d00c2fb150b30cee48.mp3';
        });       
        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 = '全屏观赏'));
})();
</script>

梦油 发表于 2023-3-2 14:15

水中的月亮也在相对的方向在动。

红影 发表于 2023-3-2 14:59

反射效果还能移位的呢，都习惯了直接面对面反射呢。
很童趣的画面，把月亮播放器和倒影用得太巧妙了{:4_199:}

红影 发表于 2023-3-2 15:01

那些星星也可以调整一下的，都弄到猴子身上和树上了{:4_173:}

樵歌 发表于 2023-3-2 17:04

创造性移动月亮，虽然好看，但真被猴子偷了乍办{:4_173:}

庶民 发表于 2023-3-2 17:21

好，童心开花了。

绿叶清舟 发表于 2023-3-2 21:26

庶民 发表于 2023-3-2 17:21
好，童心开花了。

谢谢庶民

绿叶清舟 发表于 2023-3-2 21:26

樵歌 发表于 2023-3-2 17:04
创造性移动月亮，虽然好看，但真被猴子偷了乍办

把猴子吊起来{:4_189:}

绿叶清舟 发表于 2023-3-2 21:27

红影 发表于 2023-3-2 15:01
那些星星也可以调整一下的，都弄到猴子身上和树上了

发完贴，再看代码时才发现有星星的{:4_189:}

绿叶清舟 发表于 2023-3-2 21:29

梦油 发表于 2023-3-2 14:15
水中的月亮也在相对的方向在动。

猴子干的{:4_173:}

醉美水芙蓉 发表于 2023-3-2 21:37

绿叶清舟 发表于 2023-3-2 21:39

醉美水芙蓉 发表于 2023-3-2 21:37
清舟美女好制作！

谢谢芙蓉{:4_187:}

一朵梅 发表于 2023-3-2 22:38

可爱呀～

马黑黑 发表于 2023-3-2 22:43

呀，碳纤维树枝

红影 发表于 2023-3-2 22:52

绿叶清舟 发表于 2023-3-2 21:27
发完贴，再看代码时才发现有星星的

那么多你都没注意啊，600个星星呢{:4_173:}

雨中悄然 发表于 2023-3-3 07:36

可爱{:4_187:}

梦油 发表于 2023-3-3 09:36

绿叶清舟 发表于 2023-3-2 21:29
猴子干的

不对，不对，这是咱们清舟朋友的杰作啊{:4_189:}

小辣椒 发表于 2023-3-3 13:50

清舟制作总是那么的有创意{:4_170:}

小辣椒 发表于 2023-3-3 13:50

大家一起看猴子捞月月亮吧{:4_170:}

樵歌 发表于 2023-3-3 21:17

绿叶清舟 发表于 2023-3-2 21:26
把猴子吊起来

它说被它咬了一口，有招吗{:4_173:}

查看完整版本: 猴子捞月