马黑黑 发表于 2023-5-8 08:09

非洲大象

<css-doodle grid="12x8" id="mplayer">
        :doodle {
                @size: 1000px 704px;
                margin: 0 0 0 calc(50% - 581px);
                box-shadow: 0 0 8px #000;
                --state: paused;
        }
        background: url('https://638183.freep.cn/638183/t23/1/elephant.jpg');
        background-position: calc((@col - 1) * 1000 / @size-col * -1px) calc((@row - 1) * 704 / @size-row * -1px);
        :hover { transform: rotate(360deg); }
        transition: 3s;
        @row(1) {
                @shape: circle;
                :after {
                        content: '';
                        @shape: @p(windmill, hypocycloid 3, bicorn);
                        @size: @r(80,100)%;
                        background: darkred;
                        cursor: pointer;
                        animation: rot @r(4,8)s infinite linear var(--state);
                }
        }
        @keyframes rot { to { transform: rotate(360deg); } }
</css-doodle>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1820275912" autoplay loop></audio>

<script>
(function() {
        let script = document.createElement('script');
        script.src = 'https://unpkg.com/css-doodle@0.34.9/css-doodle.min.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-8 09:36

黑黑把刚刚讲的凌迟大象又做成实例帖子了，真棒{:4_199:}

红影 发表于 2023-5-8 09:37

shape:也有纸风扇效果么？这个忘记了{:4_173:}

红影 发表于 2023-5-8 09:38

感谢黑黑又带来新的玩法{:4_187:}

梦油 发表于 2023-5-8 10:07

这个制做真有新意。

梦缘 发表于 2023-5-8 11:15

感谢老师的代码分享，欣赏问好！

毋问我从哪里来 发表于 2023-5-8 11:31

残忍！{:5_103:}

马黑黑 发表于 2023-5-8 13:11

毋问我从哪里来 发表于 2023-5-8 11:31
残忍！

这是根雕，我的茶几{:4_170:}

马黑黑 发表于 2023-5-8 13:14

梦缘 发表于 2023-5-8 11:15
感谢老师的代码分享，欣赏问好！

{:4_190:}

马黑黑 发表于 2023-5-8 13:15

红影 发表于 2023-5-8 09:37
shape:也有纸风扇效果么？这个忘记了

风车吧，有的

马黑黑 发表于 2023-5-8 13:16

红影 发表于 2023-5-8 09:38
感谢黑黑又带来新的玩法

这个，原来使用纯CSS+JS实现过，纯欲风那个帖子

马黑黑 发表于 2023-5-8 13:16

梦油 发表于 2023-5-8 10:07
这个制做真有新意。

残忍的艺术{:4_170:}

毋问我从哪里来 发表于 2023-5-8 13:40

马黑黑 发表于 2023-5-8 13:11
这是根雕，我的茶几

吓死宝宝了！{:5_102:}

毋问我从哪里来 发表于 2023-5-8 13:41

马黑黑 发表于 2023-5-8 13:11
这是根雕，我的茶几

您好有米哦！{:5_116:}

小辣椒 发表于 2023-5-8 14:56

这个js我今天手机看出来很快的{:4_199:}

小辣椒 发表于 2023-5-8 14:59

就是半身大象有点可怕的{:4_198:}

梦油 发表于 2023-5-8 15:01

马黑黑 发表于 2023-5-8 13:16
残忍的艺术

是啊，看着真有点血腥味。

马黑黑 发表于 2023-5-8 17:32

梦油 发表于 2023-5-8 15:01
是啊，看着真有点血腥味。

{:4_196:}

马黑黑 发表于 2023-5-8 17:33

小辣椒 发表于 2023-5-8 14:59
就是半身大象有点可怕的

{:4_172:}

马黑黑 发表于 2023-5-8 17:33

毋问我从哪里来 发表于 2023-5-8 13:40
吓死宝宝了！

{:4_190:}
页: [1] 2 3 4 5 6
查看完整版本: 非洲大象