共计 972 个字符，预计需要花费 3 分钟才能阅读完成。
最近在逛知乎时，意外发现了一组 CSS 效果，其中一个太阳系运行的动画吸引了我。于是我决定把这个效果加到个人博客的首页头部中来。
修改首页
首页对应的文件是 index.hbs，找到其中的 header 内容，并修改为：
<header class=”site-header outer”>
<div class=’solar-syst’>
<div class=’sun’></div>
<div class=’mercury’></div>
<div class=’venus’></div>
<div class=’earth’></div>
<div class=’mars’></div>
<div class=’jupiter’></div>
<div class=’saturn’></div>
<div class=’uranus’></div>
<div class=’neptune’></div>
<div class=’pluto’></div>
<div class=’asteroids-belt’></div>
</div>
<div class=”inner”>
{{> “site-nav”}}
</div>
</header>
编写 CSS
css 代码在作者的 codepen 上有说明，注意选择编译后的 css 进行查看。我个人写了一个 solar.css 保存其内容。
.solar-syst 以上的 css 代码都可以删除，并且在该类中加入背景属性：
.solar-syst {
background: radial-gradient(ellipse at bottom, #1C2837 0%, #050608 100%);
margin: 0 auto;
width: 100%;
height: 600px;
position: relative;
}
…
添加 CSS
部署 css
编辑好的 solar.css 文件，放置在 ghost/content/themes/casper/assets/css 下面。
引入 css
修改 default.hbs，在 header 中加入 css 引用。
…
<head>
…
<link rel=”stylesheet” type=”text/css” href=”{{asset “css/solar.css”}}” />
…
</head>
<body …>
…
</body>
以上工作完成后，重启 Ghost 即可查看博客的新动画效果。
