用pencilcode写了一个3d球

马黑黑

马黑黑

代码（请不要在本页测试，以免对一楼的演示产生干扰）：

1. <style>
   
2. #papa {
   
3.         margin: 30px auto;
   
4.         width: 1024px;
   
5.         height: 640px;
   
6.         display: grid;
   
7.         place-items: center;
   
8.         position: relative;
   
9. }
   
10. .circle {
    
11.         position: absolute;
    
12.         width: 400px;
    
13.         height: 400px;
    
14.         border-radius: 50%;
    
15.         border: 2px solid var(--bdcolor);
    
16. }
    
17. @keyframes rotZ {
    
18.         0% { transform: perspective(2000px) rotateX(var(--degX1)) rotateY(var(--degY1)) rotateZ(0deg); }
    
19.         100%{ transform: perspective(2000px) rotateX(var(--degX2)) rotateY(var(--degY2)) rotateZ(360deg); }
    
20. }
    
21. </style>
    
22. 
    
23. <div id="papa"></div>
    
24. 
    
25. <script>
    
26. let total = 50;
    
27. Array.from({length: total}).forEach( (item,key) => {
    
28.         let sp = document.createElement('span');
    
29.         sp.className = 'circle';
    
30.         let aX = Math.random() * 360, aY = Math.random() * 360;
    
31.         sp.style.cssText += `
    
32.                 --bdcolor: #${Math.random().toString(16).substr(-6)};
    
33.                 --degX1: ${aX}deg;
    
34.                 --degX2: ${aX + 360}deg;
    
35.                 --degY1: ${aY}deg;
    
36.                 --degY2: ${aY + 360}deg;
    
37.                 transform: perspective(2000px) rotateY(${aY}deg) rotateX(${aX}deg);
    
38.                 animation: rotZ 16s infinite linear;
    
39.         `;
    
40.         papa.appendChild(sp);
    
41. });
    
42. </script>

复制代码

红影

--degX2: ${aX + 360}deg; 怎么感觉任何一个角度加上360度还是它自身啊。

红影

这个漂亮，各个角度都在转的感觉，可以做舞厅的灯球了

红影

黑黑总能带来耳目一新的新效果，这个太美了

马黑黑

红影 发表于 2023-4-7 22:03
--degX2: ${aX + 360}deg; 怎么感觉任何一个角度加上360度还是它自身啊。

假如 ax = 21，则：

每一个圆圈转动的初始角度是 --degX1: 21deg; ，转一圈即 --degX2 的值则是：21 + 360

关键帧动画转完整一圈才能平滑。由于每一个圆圈的初始旋转角度不一样，所以设计了示例中的算法。

马黑黑

红影 发表于 2023-4-7 22:06
黑黑总能带来耳目一新的新效果，这个太美了

我用 doodle 插件做了一个帖，但目前论坛不支持：

http://mahei.freeee.ml/art/bshow ... &art=1680869583

马黑黑

红影 发表于 2023-4-7 22:04
这个漂亮，各个角度都在转的感觉，可以做舞厅的灯球了

应该可以吧，做个装饰品背景也不错

红影

马黑黑 发表于 2023-4-7 22:07
假如 ax = 21，则：

每一个圆圈转动的初始角度是 --degX1: 21deg; ，转一圈即 --degX2 的值则是：21 + ...

比如21度，无论加360还是720，都是一圈两圈后的原角度方向的吧。

红影

马黑黑 发表于 2023-4-7 22:09
我用 doodle 插件做了一个帖，但目前论坛不支持：

http://mahei.freeee.ml/art/bshow.php?st=3&sd=3&a ...

哇，你帖子里的好像半径也不一样，还要漂亮。

红影

马黑黑 发表于 2023-4-7 22:10
应该可以吧，做个装饰品背景也不错

看到你做成的帖子了，好漂亮啊

马黑黑

红影 发表于 2023-4-7 22:35
看到你做成的帖子了，好漂亮啊

还行

马黑黑

红影 发表于 2023-4-7 22:35
哇，你帖子里的好像半径也不一样，还要漂亮。

doodle还是不错的

马黑黑

红影 发表于 2023-4-7 22:33
比如21度，无论加360还是720，都是一圈两圈后的原角度方向的吧。

旋转就是要头尾衔接的

焱鑫磊

黑黑老师棒棒哒！

马黑黑

焱鑫磊 发表于 2023-4-7 23:50
黑黑老师棒棒哒！

谢谢支持。晚上好

庶民

这个很有趣的，点赞

红影

马黑黑 发表于 2023-4-7 22:47
还行

看到这里也做了一个呢，更漂亮

红影

马黑黑 发表于 2023-4-7 22:48
doodle还是不错的

涂鸦，就算这里不能用，黑黑还是自己写了个，厉害

红影

马黑黑 发表于 2023-4-7 22:48
旋转就是要头尾衔接的

嗯嗯，这样才不乱。知道了