马黑黑 发表于 2023-5-9 08:18

崛起

本帖最后由 马黑黑 于 2023-5-12 21:42 编辑 <br /><br /><css-doodle id="mplayer">
        :doodle {
                @grid: 10 / 1024px 640px;
                background: gray linear-gradient(-4deg,olive,transparent,black);
                box-shadow: 0 0 8px #000;
                position: relative;
                margin: 0 0 0 calc(50% - 593px);
                z-index: 1;
                --state: paused;
        }
        position: absolute;
        @nth(1) {
                --deg: 10deg;
                @size: 80px;
                @place: 50% 10%;
                border-radius: 50%;
                box-shadow: 18px 18px snow;
                transform: rotate(-10deg);
                animation: rot .8s infinite alternate linear var(--state);
                :before {
                        content: '';
                        @size: 100%;
                        position: absolute;
                        left: 18px;
                        top: 18px;
                        cursor: pointer;
                }
        }
        @match(i > 1 && i ≤ 80) {
                @size: @r(1,4)px;
                @place: @r(0, 100)% @r(0, 30)%;
                background: lightblue;
                --deg: -45deg;
                animation: fade @r(.8, 1.2)s @r(-.2, 1)s infinite alternate, rot @r(.5, 1.5)s infinite alternate;
        }
        @match(i > 80) {
                @size: @r(10px, 200px) @lr;
                background: linear-gradient(green,silver);
                left: @r(0, 100)%;
                bottom: 0;
                transform: translateY(@p(50%, 100%)) rotate(45deg) skew(@r(30, 40deg), @lr);
        }
        @keyframes fade { to { opacity: .2; } }
        @keyframes rot {
                to { transform: rotate(var(--deg)); }
        }
</css-doodle>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=544951747" autoplay loop></audio>

<script>
(function() {
        let script = document.createElement('script');
        script.src = 'https://638183.freep.cn/638183/web/api/css-doodle.js';
        document.head.appendChild(script);
        let mState = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        aud.addEventListener('play', mState, false);
        aud.addEventListener('pause', mState, false);
        mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>

红影 发表于 2023-5-9 10:14

有趣，每次刷新底下的绿色植被都不一样。漂亮{:4_187:}

红影 发表于 2023-5-9 10:15

这个厉害了，没有一张图片，月亮、星星，还有下面的绿树，全部是纯代码模拟的{:4_199:}

红影 发表于 2023-5-9 10:16

css-doodle 也能模拟月亮和星星啊。欣赏黑黑纯代码帖子{:4_199:}

红影 发表于 2023-5-9 10:18

每次刷新发现星星也不一样的呢。不过看到过星星在月亮前面的时候，应该设置月亮在最上面吧{:4_173:}

梦缘 发表于 2023-5-9 10:25

真好玩，感谢老师的代码分享！{:4_187:}

梦油 发表于 2023-5-9 10:32

群星闪烁，很漂亮。

马黑黑 发表于 2023-5-9 11:36

梦油 发表于 2023-5-9 10:32
群星闪烁，很漂亮。

尝试一下 css-doodle 实现过去实现过的类似功能

马黑黑 发表于 2023-5-9 11:37

红影 发表于 2023-5-9 10:14
有趣，每次刷新底下的绿色植被都不一样。漂亮

帖子底部的单元格是随机分布的

马黑黑 发表于 2023-5-9 11:38

梦缘 发表于 2023-5-9 10:25
真好玩，感谢老师的代码分享！

不客气

马黑黑 发表于 2023-5-9 11:38

红影 发表于 2023-5-9 10:18
每次刷新发现星星也不一样的呢。不过看到过星星在月亮前面的时候，应该设置月亮在最上面吧

星星小，没必要

马黑黑 发表于 2023-5-9 11:38

红影 发表于 2023-5-9 10:15
这个厉害了，没有一张图片，月亮、星星，还有下面的绿树，全部是纯代码模拟的

有图片也是可以的，只要图片合适

亦是金 发表于 2023-5-9 11:42

新代码，欣赏学习中！有可能想模仿一个！{:4_190:}

马黑黑 发表于 2023-5-9 12:34

亦是金 发表于 2023-5-9 11:42
新代码，欣赏学习中！有可能想模仿一个！

这个不是太复杂，研究一下便可知道原理和实现细节

罗浮梦 发表于 2023-5-9 14:28

真好看{:4_199:}

罗浮梦 发表于 2023-5-9 14:29

星星闪烁，月儿如荡漾的小船

樵歌 发表于 2023-5-9 14:48

俺要掰一个笋子来享用，俺还要天上的月亮，反正是代码做的，成本小{:4_170:}

梦油 发表于 2023-5-9 15:53

马黑黑 发表于 2023-5-9 11:36
尝试一下 css-doodle 实现过去实现过的类似功能

效果很好。

马黑黑 发表于 2023-5-9 17:35

梦油 发表于 2023-5-9 15:53
效果很好。

一般般过得去差不多{:4_170:}

马黑黑 发表于 2023-5-9 17:36

樵歌 发表于 2023-5-9 14:48
俺要掰一个笋子来享用，俺还要天上的月亮，反正是代码做的，成本小

随便随意
页: [1] 2 3 4 5 6 7
查看完整版本: 崛起