3d球体送小九

马黑黑

马黑黑

完整代码：

1. <style>
   
2. .stage{
   
3.         margin: auto;
   
4.         position: relative;
   
5.         width: 760px;
   
6.         height: 560px;
   
7.         background: #000;
   
8.         perspective: 3000px;
   
9.         perspective-origin: 50% 50%;
   
10. }
    
11. .circle {
    
12.         position: absolute;
    
13.         left: calc(50% - 150px);
    
14.         top: calc(50% - 150px);
    
15.         width: 300px;
    
16.         height: 300px;
    
17.         transform-style: preserve-3d;
    
18.         animation: rot 10s linear infinite;
    
19. }
    
20. .circle div {
    
21.         position: absolute;
    
22.         width: 100%;
    
23.         height: 100%;
    
24.         border: 1px solid olive;
    
25.         border-radius: 50%;
    
26. }
    
27. .circle div:nth-child(1){ transform:rotateY(0deg);}
    
28. .circle div:nth-child(2){ transform:rotateY(30deg);}
    
29. .circle div:nth-child(3){ transform:rotateY(60deg);}
    
30. .circle div:nth-child(4){ transform:rotateY(90deg);}
    
31. .circle div:nth-child(5){ transform:rotateY(120deg);}
    
32. .circle div:nth-child(6){ transform:rotateY(150deg);}
    
33. @keyframes rot{
    
34.         0%{ transform: rotateZ(30deg) rotateY(0turn);}
    
35.         100%{ transform: rotateZ(30deg) rotateY(1turn);}
    
36. }
    
37. </style>
    
38. 
    
39. <div class="stage">
    
40.         <div class="circle">
    
41.                 <div></div>
    
42.                 <div></div>
    
43.                 <div></div>
    
44.                 <div></div>
    
45.                 <div></div>
    
46.                 <div></div>
    
47.         </div>
    
48. </div>

复制代码

马黑黑

具体教程与解释请移步：

https://www.huachaowang.com/foru ... hread&tid=58509

小九

好漂亮啊，谢谢黑黑

绿叶清舟

这个球漂亮

加林森

老黑又制作出来一个滚动的园球啊。厉害。

小九

但是我不知道该如何组合 代码， 如果要放图片的话，是不是还需要加图片代码和音乐代码进去

马黑黑

小九 发表于 2022-4-8 19:35
但是我不知道该如何组合 代码， 如果要放图片的话，是不是还需要加图片代码和音乐代码进去

这个需要点功夫，你先把礼物收了

马黑黑

小九 发表于 2022-4-8 19:25
好漂亮啊，谢谢黑黑

不客气哈

马黑黑

绿叶清舟 发表于 2022-4-8 19:30
这个球漂亮

又说球！东篱会笑话我的

马黑黑

加林森 发表于 2022-4-8 19:30
老黑又制作出来一个滚动的园球啊。厉害。

还不错吧

红影

马黑黑 发表于 2022-4-8 20:28
又说球！东篱会笑话我的

看到这句，笑喷

红影

果然，在3d情况下，只需去分180度就够了，剩下的半圈在反面自动存在了

加林森

马黑黑 发表于 2022-4-8 20:29
还不错吧

挺好的，漂亮。

红影

在有景深的情况下，色彩竟变得这么漂亮，是不是所有的色彩放进去都会很美？

红影

在本地测试了一下，把border-radius: 50%;变成30%，也挺好看，像灯笼

马黑黑

红影 发表于 2022-4-8 20:56
在本地测试了一下，把border-radius: 50%;变成30%，也挺好看，像灯笼

嗯，加工一下，会有不同的效果

马黑黑

加林森 发表于 2022-4-8 20:48
挺好的，漂亮。

嗯，谢谢

马黑黑

红影 发表于 2022-4-8 20:47
看到这句，笑喷

马黑黑

红影 发表于 2022-4-8 20:52
在有景深的情况下，色彩竟变得这么漂亮，是不是所有的色彩放进去都会很美？

应该是