论坛 › 欢乐水吧 › 学习帖【等你】

梦江南 发表于 2024-7-29 09:22

学习帖【等你】

本帖最后由 梦江南 于 2024-7-29 10:16 编辑 <br /><br /><style>
#papa {
        margin: 30px 0 30px calc(50% - 593px);
        width: 1024px;
        height: 600px;
        background: url('https://pic.imgdb.cn/item/66a6ddabd9c307b7e98efb15.gif') no-repeat center/cover;
        overflow: hidden;
        box-shadow: 0 0 10px rgba(0,0,0,.5);
        z-index: 1;
        position: relative;
}
#player {
        position: absolute;
        bottom: 280px;
        left: calc(50% - 1px);
        width:150px;
        height: 150px;
        border: 6px solid orange;
        border-radius: 50%;
        cursor: pointer;
        transform: rotateX(6deg);
        --tt: 6s;
}
#player::before, #player::after {
        position: absolute;
        content: '';
        border: inherit;
        border-radius: inherit;
        animation: rot var(--tt) linear infinite var(--state);
}
#player::before {
        inset: 20px;
        border-color: red;
}
#player::after {
        inset: 20px;
        border-width: 12px;
        border-style: dashed;
        --tt: 4s;
}
li-zi {
        position: absolute;
        width: 10px;
        height: 20px;
        border-radius:50%;
        box-shadow: inset 0 0 10px red;
}
@keyframes moving {
        from { transform: translateY(0); opacity: 1; }
        to { transform: translateY(-400px); opacity: 0; }
}
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="papa">
        <!-- Moola Mantra -->
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=304923" autoplay loop></audio>
        <div id="player" title="播放/暂停" class="loading"></div>
</div>

<script>
var all = 100;
for(var i = 0; i < all; i++) {
        var lz = document.createElement('li-zi');
        lz.style.cssText += `
                left: ${ 50 + Math.floor(Math.random() * 50)}px;
                top: ${ 60 + Math.floor(Math.random() * 50)}px;
                background: #${Math.random().toString(16).substring(2,8)};
                animation: moving ${Math.random() * 2 + 2}s -${Math.random() * 4}s cubic-bezier(0.01, 0.12, 0.6, 1.04) infinite var(--state);
        `;
        player.prepend(lz);
}
aud.oncanplay = aud.onplaying = aud.onpause = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

竹溪 发表于 2024-7-29 09:50

很悠闲的水边风光{:4_204:}

梦江南 发表于 2024-7-29 10:18

竹溪 发表于 2024-7-29 09:50
很悠闲的水边风光

谢谢竹溪沙发支持，问好！{:4_204:}

梦油 发表于 2024-7-29 10:18

好一个消夏避暑的好地方。

梦江南 发表于 2024-7-29 10:36

梦油 发表于 2024-7-29 10:18
好一个消夏避暑的好地方。

是啊，看到这地方心也会静下来了。谢谢梦油老师支持。{:4_204:}

红影 发表于 2024-7-29 11:04

漂亮的代码小播和粒子效果。水中还有个动态艄公呢，山清水秀的好地方。
欣赏梦江南好帖{:4_187:}

红影 发表于 2024-7-29 11:05

梦江南的学习很认真，赞一个{:4_187:}

梦江南 发表于 2024-7-29 11:19

红影 发表于 2024-7-29 11:04
漂亮的代码小播和粒子效果。水中还有个动态艄公呢，山清水秀的好地方。
欣赏梦江南好帖

影子看得好仔细，这地方确实不错，夏天避暑胜地。谢谢支持鼓励！{:4_204:}

梦江南 发表于 2024-7-29 11:23

红影 发表于 2024-7-29 11:05
梦江南的学习很认真，赞一个

谢谢影子鼓励，我同你们不一样，小学生一个，不认真，对不起黑黑老师了。

起个网名好难 发表于 2024-7-29 11:35

https://img.soogif.com/olrt53z1tMMdY6VqE2K7nSCkMRVWeFe0.gif

梦江南 发表于 2024-7-29 13:26

起个网名好难 发表于 2024-7-29 11:35


谢谢老师支持，问好！{:4_204:}

海笑 发表于 2024-7-29 14:07

欣赏老友佳作！

梦江南 发表于 2024-7-29 14:43

海笑 发表于 2024-7-29 14:07
欣赏老友佳作！

谢谢老友分享，问好！{:4_204:}

梦油 发表于 2024-7-29 17:22

梦江南 发表于 2024-7-29 10:36
是啊，看到这地方心也会静下来了。谢谢梦油老师支持。

看到你的好作品很高兴。

梦江南 发表于 2024-7-29 17:37

梦油 发表于 2024-7-29 17:22
看到你的好作品很高兴。

谢谢，这是活到老学到老。

红影 发表于 2024-7-29 20:27

梦江南 发表于 2024-7-29 11:19
影子看得好仔细，这地方确实不错，夏天避暑胜地。谢谢支持鼓励！

那椅子空了一个，是无言的邀请么，邀请大家去玩{:4_173:}

红影 发表于 2024-7-29 20:28

梦江南 发表于 2024-7-29 11:23
谢谢影子鼓励，我同你们不一样，小学生一个，不认真，对不起黑黑老师了。

每个人学习的开始时间不一样，后面开始的，肯定要走过一段探索的路程呢{:4_187:}

小辣椒 发表于 2024-7-29 23:20

梦江南也是厉害的，学习特别认真，而且一看就会了、赞的！

小辣椒 发表于 2024-7-29 23:22

其实多实践肯定是好事，只有多练习了才会掌握，小辣椒以前空一点就喜欢多做，感觉学习会快一点，现在忙了来不及做作业，发现许多跟不上的。

小辣椒 发表于 2024-7-29 23:23

欣赏梦江南的精彩制作{:4_187:}

查看完整版本: 学习帖【等你】