马黑黑 发表于 2024-2-2 22:24

给个名字？

<style>
#mbox {
        margin: 20px auto;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background:
                linear-gradient(green, gray, orange),
                repeating-radial-gradient(at var(--per), blue 2px, white 4px);
        background-blend-mode: color;
        animation: rot 6s infinite linear var(--state);
        --per: 50%;
        --state: running;
}
@keyframes rot { to { transform: rotate(1turn); } }
</style>

<div id="mbox"></div>

<script>
let per = 50, step = 1, raf;

var render = () => {
        per += step;
        if(per <= 0 || per >= 100) step = -step;
        mbox.style.setProperty('--per', per + '%');
        raf = requestAnimationFrame(render);
};

render();

mbox.onclick = () => {
        if(raf) {
                raf = cancelAnimationFrame(raf);
                mbox.style.setProperty('--state', 'paused');
        }else{
                raf = requestAnimationFrame(render);
                mbox.style.setProperty('--state', 'running');
        }
};

</script>

马黑黑 发表于 2024-2-2 22:24

代码
<style>
#mbox {
        margin: 20px auto;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background:
                linear-gradient(green, gray, orange),
                repeating-radial-gradient(at var(--per), blue 2px, white 4px);
        background-blend-mode: color;
        animation: rot 6s infinite linear var(--state);
        --per: 50%;
        --state: running;
}
@keyframes rot { to { transform: rotate(1turn); } }
</style>

<div id="mbox"></div>

<script>
let per = 50, step = 1, raf;

var render = () => {
        per += step;
        if(per <= 0 || per >= 100) step = -step;
        mbox.style.setProperty('--per', per + '%');
        raf = requestAnimationFrame(render);
};

render();

mbox.onclick = () => {
        if(raf) {
                raf = cancelAnimationFrame(raf);
                mbox.style.setProperty('--state', 'paused');
        }else{
                raf = requestAnimationFrame(render);
                mbox.style.setProperty('--state', 'running');
        }
};

</script>

红影 发表于 2024-2-2 22:40

线性渐变混合了径向渐变，竟然会产生这样的效果呢{:4_187:}

马黑黑 发表于 2024-2-2 22:45

红影 发表于 2024-2-2 22:40
线性渐变混合了径向渐变，竟然会产生这样的效果呢

css3的背景就是这么神奇

红影 发表于 2024-2-2 22:48

想了半天没想明白那个径向渐变混合后怎么是这样的效果。

红影 发表于 2024-2-2 22:48

这名字不好起，变色龙？{:4_173:}

红影 发表于 2024-2-2 23:19

马黑黑 发表于 2024-2-2 22:45
css3的背景就是这么神奇

是啊，很超乎想象的呢{:4_187:}

马黑黑 发表于 2024-2-3 08:24

红影 发表于 2024-2-2 22:48
想了半天没想明白那个径向渐变混合后怎么是这样的效果。

你独立出来单独看效果没有

马黑黑 发表于 2024-2-3 08:24

红影 发表于 2024-2-2 22:48
这名字不好起，变色龙？

算了，玩玩而已

红影 发表于 2024-2-3 13:24

马黑黑 发表于 2024-2-3 08:24
你独立出来单独看效果没有

没有{:4_173:}

红影 发表于 2024-2-3 13:29

马黑黑 发表于 2024-2-3 08:24
算了，玩玩而已

黑黑可以自己起个名字的{:4_173:}

马黑黑 发表于 2024-2-5 18:53

红影 发表于 2024-2-3 13:29
黑黑可以自己起个名字的

不会起

红影 发表于 2024-2-5 22:21

马黑黑 发表于 2024-2-5 18:53
不会起

随便起个啊，知道是说它就行，这个也是“代数”{:4_173:}

马黑黑 发表于 2024-2-5 22:21

红影 发表于 2024-2-5 22:21
随便起个啊，知道是说它就行，这个也是“代数”

不会

红影 发表于 2024-2-6 18:57

马黑黑 发表于 2024-2-5 22:21
不会

那就只能算了{:4_173:}

马黑黑 发表于 2024-2-6 18:57

红影 发表于 2024-2-6 18:57
那就只能算了

好哒

红影 发表于 2024-2-6 20:18

马黑黑 发表于 2024-2-6 18:57
好哒

{:4_204:}

马黑黑 发表于 2024-2-6 23:03

红影 发表于 2024-2-6 20:18


谢花

红影 发表于 2024-2-7 11:14

马黑黑 发表于 2024-2-6 23:03
谢花

又来了，还好这次不是谢顶{:4_170:}

马黑黑 发表于 2024-2-7 11:48

红影 发表于 2024-2-7 11:14
又来了，还好这次不是谢顶

谢顶其实挺好，绝顶聪明
页: [1] 2
查看完整版本: 给个名字？