Ghost配置6——首页太阳系动画效果
最近在逛知乎时，意外发现了一组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即可查看博客的新动画效果。
相关推荐
qiupu 2020-11-04
多读书读好书 2020-11-03
RedCode 2020-10-28
jiedinghui 2020-10-25
Ladyseven 2020-10-22
hellowzm 2020-10-12
zuncle 2020-09-28
Ladyseven 2020-09-11
jiedinghui 2020-09-07
xiaohuli 2020-09-02
葉無聞 2020-09-01
impress 2020-08-26
ThikHome 2020-08-24
nicepainkiller 2020-08-20
hellowzm 2020-08-18