受GitHub - tzvetkov75/solar-theme-hexo启发，想给网站做一个星星动画。起初使用solar作为hexo主题时，只是给wrapper加了一个随机流星小动画（并且经常卡住）；现在为stellar升级了这么久，也该做一个DIY的Antares小动画了。那么，做几颗星星、怎么设计其运动轨迹，就是CSS编写的重点。

素材准备

选星

主角是心宿二，那么不妨把整个天蝎座放进来。主角当然是心宿二和它的伴星，配角则是其他十余个亮度较高的星。

构思

思路：

1. 分离“主星”与“次星”：

   • 主星 (动态)：心宿二 A 和 B (.star-a, .star-b)。它们是动画的主体，使用 3D CSS transform 来模拟偏心轨道。
   • 次星 (静态)：其余15颗天蝎座恒星。它们是静态的背景，没有动画，以确保视觉焦点在主星上

2. (X, Y) 坐标配置化：
   在 antares.ejs 文件顶部建立了一个用户配置区，可在此填入一个 1710x1079 像素画布上的 (X, Y) 坐标，以及每颗星的星等（mag）和图片名称（name）。

3. EJS 坐标转换：
   antares.ejs以指定的心宿二坐标 (antares_coords) 为原点 (0, 0)，计算每颗次星相对于原点的角度和半径，等比例缩放整个星图，将其映射到250px 的小圆形画布（.antares-wrapper）中；最后，它将这些缩放后的位置转换为 CSS 所需的 top 和 left 百分比。

4. 独立的视觉样式：

   • 大小与亮度：通过 EJS 中配置的 mag (星等) 字段，为每颗星添加了 .mag-2 到 .mag-6 的 CSS 类。style.styl 文件使用这些类来控制星星的 width 和 box-shadow（辉光）。

   • 图片：通过 EJS 中配置的 name 字段，为每颗星添加了唯一的 id (如 shaula)。style.styl 文件使用这些 ID 来为每一颗星指定一个独立的 PNG 图片。

动态系统：α Scorpii A 和 α Scorpii B

心宿二A和心宿二B是一个偏心双星系统，其中心宿二

伴星的图片真的很难找到，毕竟主星目前未经处理的最清晰图片也仅仅如下：

图1 best image we have for antares

所以使用了Antares (α Scorpii A and α Scorpii B)… - RA/Dec Astronomy这张照片来扣取—虽然很模糊，但竟然是唯一一张能明显看出主星和伴星所在的。

动画的实现方式是：A 星在中心点-10px 的位置摆动，B 星在中心点+100px 的位置公转。在视觉上模拟了 B 星在围绕一个轻微摆动的 A 星进行偏心轨道运动。

静态星空画布

在stellarium截图后，利用在线图片坐标拾取工具得到需要的星在画布中的二维坐标。

以天蝎座为例：（画布大小：1710 , 1079）

1. 297 , 642 尾宿九 Lesath

2. 270 , 622 尾宿八 Shaula

3. 157 , 705 尾宿七 Mula

4. 92 , 754 尾宿六 Girtab

5. 165 , 926 尾宿五 Sargas

6. 406 , 996 $\eta$ Sco

7. 585 , 1003 $\epsilon1$ Sco

8. 681 , 790 尾宿一 Xamidimura

9. 767 , 609 尾宿二 Larawag

10. 1029 , 359 心宿三 Paikauhale

11. 1133 , 294 心宿二 Antares

12. 1245 , 290 心宿一 Alniyat

13. 1548 , 77 房宿四 Acrab

14. 1545 , 244 房宿三 Dschubba

15. 1482 , 425 房宿一 Fang

为了方便做闪烁效果，仍然PS扣出透明背景（记得.png格式保存）：
魔棒工具选择背景色，取消框选“连续”，Del 删去背景色的像素点，存储为png格式。

所有png准备完毕后，在TinyPNG – Compress AVIF, WebP, PNG and JPEG images进行有损压缩。压缩率可达60-70%。

图片来源

• NASA的每日一图网站：APOD Text Search（搜索：Scorpii）

  • Mars in the Clouds：APOD: 2016 September 8 - Mars in the Clouds
  • Scorpius in Red and Blue：APOD: 2012 May 25 - Scorpius in Red and Blue
  • Comet and Meteor：APOD: 2009 January 5 - Comet and Meteor
  • Antares and Rho Ophiuchi：APOD: 2000 May 21 - Antares and Rho Ophiuchi
  • 心宿二與雲氣：APOD: 2012 April 17 - Antares and Clouds

• RA/Dec Astronomy：Antares (α Scorpii A and α Scorpii B)… - RA/Dec Astronomy

• Best image we have of another star - red supergiant Antares：Reddit - 全网主阵地

嵌入Hexo

目标：在博客的右下角创建一个固定不动的、圆形的动画窗口。

步骤：（以stellar主题为例）

1. 创建 antares.ejs

   • 路径：themes/stellar/layout/_partials/antares.ejs
   • 功能：顶部的 (X, Y) 坐标数组、将这些坐标转换为 HTML div 标签的 EJS 脚本。

2. 修改 layout.ejs

   • 路径：themes/stellar/layout/layout.ejs
   • 操作：在 html += ... 字符串构建的末尾，</body> 标签之前，添加 html += partial('_partial/antares') 。
   • 功能：使 antares.ejs 在博客的每个页面都被加载。

3. 创建 style.styl

   • 路径：source/_data/style.styl
   • 功能：视觉样式中心。
     • 定义了 @keyframes 动画（orbitStarB, spinsun, anti-spin）。
     • 定义了 .antares-wrapper 的样式（250px大小、圆形、黑色渐变背景）。
     • 定义了动态主星 .star-a 和 .star-b 的样式（包括偏心变换）。
     • 定义了 .mag-2 到 .mag-6 类，用于控制次星的大小和辉光。
     • 使用 CSS ID (如 shaula, acrab 等) 为15颗次星分别指定了 background-image。

4. 修改 main.js

   • 路径：themes/stellar/source/js/main.js
   • 操作：添加 init.antares() 函数 ，并在文件末尾调用它 。
   • 功能：使用 $(window).on(‘load’, …) 确保在所有 PNG 图片加载完成后，才将动画容器 $(“#antares-system”) 淡入显示 ，避免动画的突然闪现。