论坛 › 马黑黑教程专版 › 锯片

马黑黑 发表于 2023-4-21 12:09

锯片

一、css-doodle版

<css-doodle>
        :doodle {
                --state: running;
                @grid: 5 / 200px;
                filter: drop-shadow(0 0 8px gray);
                animation: rot 6s infinite linear var(--state);
        }
        :doodle(:hover) { --state: paused; }
        @place-cell: center;
        background: #333;
        border-radius: 0 100%;
        transform: rotate(calc(360deg / @size() * @i())) translate(40px);
        @keyframes rot { to { transform: rotate(1turn); } }
</css-doodle>

二、原生CSS+HTML+JS版

<style>
#mydiv {
        --state: running;
        width: 200px;
        height: 200px;
        display: grid;
        place-items: center;
        filter: drop-shadow(0 0 8px gray);
        position: relative;
        animation: rot 6s infinite linear var(--state);
}
#mydiv:hover { --state: paused; }
#mydiv > span {
        position: absolute;
        width: 40px;
        height: 40px;
        background: #333;
        border-radius: 0 100%;
}
@keyframes rot { to { transform: rotate(1turn); } }
</style>

<div id="mydiv"></div>

<script>
let total = 25;
Array.from({length: total}).forEach((item,key) => {
        let span = document.createElement('span');
        span.style.transform = `rotate(${360/total*key}deg) translate(40px)`;
        mydiv.appendChild(span);
});
</script>

马黑黑 发表于 2023-4-21 12:10

<style>
#mydiv {
        --state: running;
        width: 200px;
        height: 200px;
        display: grid;
        place-items: center;
        filter: drop-shadow(0 0 8px gray);
        position: relative;
        animation: rot 6s infinite linear var(--state);
}
#mydiv:hover { --state: paused; }
#mydiv > span {
        position: absolute;
        width: 40px;
        height: 40px;
        background: #333;
        border-radius: 0 100%;
}
@keyframes rot { to { transform: rotate(1turn); } }
</style>

<div id="mydiv"></div>

<script>
let total = 25;
Array.from({length: total}).forEach((item,key) => {
        let span = document.createElement('span');
        span.style.transform = `rotate(${360/total*key}deg) translate(40px)`;
        mydiv.appendChild(span);
});
</script>

马黑黑 发表于 2023-4-21 12:12

如果觉得锯齿这个方向不安全，可以修改

border-radius: 0 100%;

为

border-radius: 100% 0;

马黑黑 发表于 2023-4-21 12:19

锯片拉开，就变成树叶帽：一是修改总量少一点，而是修改颜色，三是修translate 的距离

马黑黑 发表于 2023-4-21 12:24

<p>变成了树叶帽子</p>

<style>
#mydiv1 {
        --state: running;
        width: 200px;
        height: 200px;
        display: grid;
        place-items: center;
        filter: drop-shadow(0 0 8px gray);
        position: relative;
        animation: rot 6s infinite linear var(--state);
}
#mydiv1:hover { --state: paused; }
#mydiv1 > span {
        position: absolute;
        width: 40px;
        height: 40px;
        background: green;
        border-radius: 100% 0;
}

</style>

<div id="mydiv1"></div>

<script>
(function() {
        let total = 8;
        Array.from({length: total}).forEach((item,key) => {
                let span = document.createElement('span');
                span.style.transform = `rotate(${360/total*key}deg) translate(50px)`;
                mydiv1.appendChild(span);
        });
})();
</script>

起个网名好难 发表于 2023-4-21 18:15

2楼和5楼都是 CSS+HTML+JS 实现的啊

马黑黑 发表于 2023-4-21 18:19

起个网名好难 发表于 2023-4-21 18:15
2楼和5楼都是 CSS+HTML+JS 实现的啊

css-doodle版给了代码

红影 发表于 2023-4-21 19:12

代码什么都能模拟，真棒。原来这个锯齿是树叶变来的啊{:4_187:}

马黑黑 发表于 2023-4-21 19:16

红影 发表于 2023-4-21 19:12
代码什么都能模拟，真棒。原来这个锯齿是树叶变来的啊

是的{:4_181:}

雨中悄然 发表于 2023-4-22 12:20

锯片和叶片，居然同源

红影 发表于 2023-4-22 12:39

马黑黑 发表于 2023-4-21 19:16
是的

真是千变万化呢{:4_204:}

马黑黑 发表于 2023-4-22 12:40

红影 发表于 2023-4-22 12:39
真是千变万化呢

一点点改变就会有另外一个样纸

马黑黑 发表于 2023-4-22 12:44

雨中悄然 发表于 2023-4-22 12:20
锯片和叶片，居然同源

它们其实都是差不多的东东

红影 发表于 2023-4-22 22:31

马黑黑 发表于 2023-4-22 12:40
一点点改变就会有另外一个样纸

代码的神奇之处{:4_199:}

马黑黑 发表于 2023-4-22 22:36

红影 发表于 2023-4-22 22:31
代码的神奇之处

代码只是指令。神奇，是事物的本质。

红影 发表于 2023-4-23 10:55

马黑黑 发表于 2023-4-22 22:36
代码只是指令。神奇，是事物的本质。

是事物的本质在眼睛里的影射{:4_173:}

马黑黑 发表于 2023-4-23 11:00

红影 发表于 2023-4-23 10:55
是事物的本质在眼睛里的影射

那要有一双慧眼

红影 发表于 2023-4-23 13:25

马黑黑 发表于 2023-4-23 11:00
那要有一双慧眼

借我一双慧眼吧{:4_170:}

马黑黑 发表于 2023-4-23 22:43

红影 发表于 2023-4-23 13:25
借我一双慧眼吧

不借

红影 发表于 2023-4-24 20:09

马黑黑 发表于 2023-4-23 22:43
不借

我可以找别人借{:4_173:}

查看完整版本: 锯片