星座图案

马黑黑

马黑黑

代码

1. <style>
   
2. #papa {
   
3.         margin: 50px auto 0;
   
4.         width: 100%px;
   
5.         height: 640px;
   
6.         display: grid;
   
7.         place-items: center;
   
8.         position: relative;
   
9. }
   
10. #papa > span {
    
11.         position: absolute;
    
12.         font: bold 3em serif;
    
13. }
    
14. </style>
    
15. 
    
16. <div id="papa"></div>
    
17. 
    
18. <script>
    
19. 
    
20. //星座图案 9800~9811
    
21. let total = 12, rr = 150;
    
22. Array.from({length: total}).forEach((item,key) => {
    
23.         item = document.createElement('span');
    
24.         item.innerText = String.fromCharCode(9800+key);
    
25.         item.style.transform = `rotate(${360 / total * key}deg) translateY(${rr}px) rotate(-${360 / total * key}deg`;
    
26.         papa.appendChild(item);
    
27. });
    
28. 
    
29. </script>

复制代码

红影

星座图标也好漂亮的呢，只要码号就可以了，真方便

红影

马黑黑 发表于 2022-11-12 15:05
代码

这个都不用设置路径，只要每个的旋转角度和半径就可以了。
原来星座的序号是9800开始的。

马黑黑

红影 发表于 2022-11-12 19:01
这个都不用设置路径，只要每个的旋转角度和半径就可以了。
原来星座的序号是9800开始的。

十进制是这样。

用圆形路径也是可以的，不过既然 transform 的 rotate 和 translate 可以令元素绕圆运动，就不必杀鸡用猪刀的是不是

马黑黑

红影 发表于 2022-11-12 18:29
星座图标也好漂亮的呢，只要码号就可以了，真方便

所以说，Unicode很厉害的

樵歌

加分就走

马黑黑

樵歌 发表于 2022-11-12 20:02
加分就走

处女座都这么干

红影

马黑黑 发表于 2022-11-12 19:04
十进制是这样。

用圆形路径也是可以的，不过既然 transform 的 rotate 和 translate 可以令元素绕圆运 ...

嗯嗯，又是个新思路呢

红影

马黑黑 发表于 2022-11-12 19:04
所以说，Unicode很厉害的

而且在业内还很通用。

马黑黑

红影 发表于 2022-11-12 21:26
而且在业内还很通用。

所有的文字、符号，都装在 Unicode 里面

马黑黑

红影 发表于 2022-11-12 21:25
嗯嗯，又是个新思路呢

transform 不是新思路，之前早就介绍过的

红影

马黑黑 发表于 2022-11-12 21:27
所有的文字、符号，都装在 Unicode 里面

还真是包罗万象呢。

红影

马黑黑 发表于 2022-11-12 21:27
transform 不是新思路，之前早就介绍过的

我是说这种排布方式和那个按路径的相比，是两个思路

马黑黑

红影 发表于 2022-11-12 22:55
我是说这种排布方式和那个按路径的相比，是两个思路

但是 transform 绕圆的思路在先的，后来才介绍的svg路径

马黑黑

红影 发表于 2022-11-12 22:55
还真是包罗万象呢。

它的目的就是装下所有文字符号

樵歌

马黑黑 发表于 2022-11-12 20:05
处女座都这么干

俺 不懂，再说又不是真的

红影

马黑黑 发表于 2022-11-12 23:00
但是 transform 绕圆的思路在先的，后来才介绍的svg路径

是的，svg路径可以实现的图形更多。

红影

马黑黑 发表于 2022-11-12 23:00
它的目的就是装下所有文字符号

如果它能变成世界语倒是挺不错，全世界的人交流起来就没语言障碍了。

梦缘

谢谢老师的代码分享，欣赏问好！