再画3d球

马黑黑

马黑黑

以前，做过一个3d球，静止的时候还好，旋转了就经不起推敲。重画一个，感觉还可以

马黑黑

代码

1. <style>
   
2. #papa {
   
3.         margin: auto;
   
4.         width: 740px;
   
5.         height: 600px;
   
6.         display: grid;
   
7.         place-items: center;
   
8.         perspective: 3000px;
   
9. }
   
10. #mplayer {
    
11.         --size: 400px;
    
12.         width: var(--size);
    
13.         height: var(--size);
    
14.         display: grid;
    
15.         place-items: center;
    
16.         position: relative;
    
17.         transform: rotateZ(15deg);
    
18.         transform-style: preserve-3d;
    
19.         animation: rot 10s infinite linear;
    
20.         cursor: pointer;
    
21. }
    
22. .mline {
    
23.         width: var(--size);
    
24.         height: var(--size);
    
25.         border-radius: 50%;
    
26.         border: 1px dotted snow;
    
27.         background: linear-gradient(180deg,black,tan,silver);
    
28.         position: absolute;
    
29.         opacity: .75;
    
30. }
    
31. @keyframes rot { to { transform: rotateZ(15deg) rotateY(1turn); } }
    
32. </style>
    
33. 
    
34. <div id="papa">
    
35.         <div id="mplayer"></div>
    
36.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1946730995.mp3" loop autoplay></audio>
    
37. </div>
    
38. 
    
39. <script>
    
40. (function() {
    
41.         let total = 50;
    
42.         [...Array(total).keys()].forEach( (item,key) => {
    
43.                 item = document.createElement('span');
    
44.                 item.className = 'mline';
    
45.                 item.style.transform  = `rotateY(${360/total*key}deg)`;
    
46.                 mplayer.appendChild(item);
    
47.         });
    
48.         mplayer.onclick = () => aud.paused ? (aud.play(), mplayer.style.animationPlayState = 'running') : (aud.pause(), mplayer.style.animationPlayState = 'paused');
    
49. })();
    
50. </script>
    

复制代码

红影

这个漂亮。以前貌似做过线框球，这个有渲染的，漂亮

红影

这三种颜色搭配，出现了中间的高光的感觉呢，真漂亮

马黑黑

红影 发表于 2023-1-2 20:05
这个漂亮。以前貌似做过线框球，这个有渲染的，漂亮

线条构架的球做过的

马黑黑

红影 发表于 2023-1-2 20:10
这三种颜色搭配，出现了中间的高光的感觉呢，真漂亮

最初做的时候用纯色，也不错

红影

马黑黑 发表于 2023-1-2 20:23
线条构架的球做过的

我还跟着做过，有印象

红影

马黑黑 发表于 2023-1-2 20:23
最初做的时候用纯色，也不错

还是现在的配色漂亮

马黑黑

红影 发表于 2023-1-2 20:53
还是现在的配色漂亮

可以尝试其他颜色，包括单色

马黑黑

红影 发表于 2023-1-2 20:51
我还跟着做过，有印象

这个构思简洁一点

红影

马黑黑 发表于 2023-1-2 21:27
可以尝试其他颜色，包括单色

嗯嗯，肯定每种都会效果不同

红影

马黑黑 发表于 2023-1-2 21:27
这个构思简洁一点

是啊，看JS那么简洁的，惊奇

马黑黑

红影 发表于 2023-1-2 21:43
是啊，看JS那么简洁的，惊奇

这个，基本功能就是不复杂，稍后，加入一些细节，代码就会相对多一些，逻辑性也不会那么简单

马黑黑

红影 发表于 2023-1-2 21:42
嗯嗯，肯定每种都会效果不同

是的。还可以加X轴线圈，就会更好看

红影

马黑黑 发表于 2023-1-2 23:16
这个，基本功能就是不复杂，稍后，加入一些细节，代码就会相对多一些，逻辑性也不会那么简单

现在这个已经很不错了。

红影

马黑黑 发表于 2023-1-2 23:17
是的。还可以加X轴线圈，就会更好看

哦，加了能好看么？

马黑黑

红影 发表于 2023-1-3 22:43
哦，加了能好看么？

加的好会好看的

马黑黑

红影 发表于 2023-1-3 22:42
现在这个已经很不错了。

还行吧

千羽

这个好漂亮啊