给个名字？

马黑黑

马黑黑

代码

1. <style>
   
2. #mbox {
   
3.         margin: 20px auto;
   
4.         width: 200px;
   
5.         height: 200px;
   
6.         border-radius: 50%;
   
7.         background:
   
8.                 linear-gradient(green, gray, orange),
   
9.                 repeating-radial-gradient(at var(--per), blue 2px, white 4px);
   
10.         background-blend-mode: color;
    
11.         animation: rot 6s infinite linear var(--state);
    
12.         --per: 50%;
    
13.         --state: running;
    
14. }
    
15. @keyframes rot { to { transform: rotate(1turn); } }
    
16. </style>
    
17. 
    
18. <div id="mbox"></div>
    
19. 
    
20. <script>
    
21. let per = 50, step = 1, raf;
    
22. 
    
23. var render = () => {
    
24.         per += step;
    
25.         if(per <= 0 || per >= 100) step = -step;
    
26.         mbox.style.setProperty('--per', per + '%');
    
27.         raf = requestAnimationFrame(render);
    
28. };
    
29. 
    
30. render();
    
31. 
    
32. mbox.onclick = () => {
    
33.         if(raf) {
    
34.                 raf = cancelAnimationFrame(raf);
    
35.                 mbox.style.setProperty('--state', 'paused');
    
36.         }else{
    
37.                 raf = requestAnimationFrame(render);
    
38.                 mbox.style.setProperty('--state', 'running');
    
39.         }
    
40. };
    
41. 
    
42. </script>

复制代码

红影

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

马黑黑

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

css3的背景就是这么神奇

红影

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

红影

这名字不好起，变色龙？

红影

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

是啊，很超乎想象的呢

马黑黑

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

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

马黑黑

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

算了，玩玩而已

红影

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

没有

红影

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

黑黑可以自己起个名字的

马黑黑

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

不会起

红影

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

随便起个啊，知道是说它就行，这个也是“代数”

马黑黑

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

不会

红影

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

那就只能算了

马黑黑

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

好哒

红影

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

马黑黑

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

谢花

红影

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

又来了，还好这次不是谢顶

马黑黑

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

谢顶其实挺好，绝顶聪明