论坛 › 马黑黑教程专版 › 星座图案

马黑黑 发表于 2022-11-12 15:04

星座图案

本帖最后由 马黑黑 于 2022-11-12 15:06 编辑 <br /><br /><style>
#papa {
        margin: auto;
        width: 100%px;
        height: 640px;
        display: grid;
        place-items: center;
        position: relative;
}
#papa > span {
        position: absolute;
        font: bold 3em serif;
}
</style>

<div id="papa"></div>

<script>

//星座图案 9800~9811
let total = 12, rr = 150;
Array.from({length: total}).forEach((item,key) => {
        item = document.createElement('span');
        item.innerText = String.fromCharCode(9800+key);
        item.style.transform = `rotate(${360 / total * key}deg) translateY(${rr}px) rotate(-${360 / total * key}deg`;
        papa.appendChild(item);
});

</script>

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

代码
<style>
#papa {
        margin: 50px auto 0;
        width: 100%px;
        height: 640px;
        display: grid;
        place-items: center;
        position: relative;
}
#papa > span {
        position: absolute;
        font: bold 3em serif;
}
</style>

<div id="papa"></div>

<script>

//星座图案 9800~9811
let total = 12, rr = 150;
Array.from({length: total}).forEach((item,key) => {
        item = document.createElement('span');
        item.innerText = String.fromCharCode(9800+key);
        item.style.transform = `rotate(${360 / total * key}deg) translateY(${rr}px) rotate(-${360 / total * key}deg`;
        papa.appendChild(item);
});

</script>

红影 发表于 2022-11-12 18:29

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

红影 发表于 2022-11-12 19:01

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

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

马黑黑 发表于 2022-11-12 19:04

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

十进制是这样。

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

马黑黑 发表于 2022-11-12 19:04

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

所以说，Unicode很厉害的

樵歌 发表于 2022-11-12 20:02

加分就走{:4_181:}

马黑黑 发表于 2022-11-12 20:05

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

处女座都这么干

红影 发表于 2022-11-12 21:25

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

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

嗯嗯，又是个新思路呢{:4_187:}

红影 发表于 2022-11-12 21:26

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

而且在业内还很通用。

马黑黑 发表于 2022-11-12 21:27

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

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

马黑黑 发表于 2022-11-12 21:27

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

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

红影 发表于 2022-11-12 22:55

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

还真是包罗万象呢。

红影 发表于 2022-11-12 22:55

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

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

马黑黑 发表于 2022-11-12 23:00

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

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

马黑黑 发表于 2022-11-12 23:00

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

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

樵歌 发表于 2022-11-13 07:52

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

俺 不懂，再说又不是真的{:4_173:}

红影 发表于 2022-11-13 10:05

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

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

红影 发表于 2022-11-13 10:06

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

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

梦缘 发表于 2022-11-13 10:10

谢谢老师的代码分享，欣赏问好！{:4_187:}

查看完整版本: 星座图案