Ghost配置6——首页太阳系动画效果

cc17 发布于2019-08-23 15:24 / 1774人阅读

摘要：最近在逛知乎时，意外发现了一组效果，其中一个太阳系运行的动画吸引了我。于是我决定把这个效果加到个人博客的首页头部中来。引入修改，在中加入引用。以上工作完成后，重启即可查看博客的新动画效果。

最近在逛知乎时，意外发现了一组CSS效果，其中一个太阳系运行的动画吸引了我。于是我决定把这个效果加到个人博客的首页头部中来。

修改首页

首页对应的文件是index.hbs，找到其中的header内容，并修改为：


    
        
        
        
        
        
        
        
        
        
        
        
    
    
        {{> "site-nav"}}

编写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引用。

...

    ...
    
    ...


...

以上工作完成后，重启Ghost即可查看博客的新动画效果。

GPU云服务器云服务器浮动效果动画翻转动画效果仿360首页效果 html动画效果

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101997.html

「码个蛋」2017年200篇精选干货集合

摘要：让你收获满满码个蛋从年月日推送第篇文章一年过去了已累积推文近篇文章，本文为年度精选，共计篇，按照类别整理便于读者主题阅读。本篇文章是今年的最后一篇技术文章，为了让大家在家也能好好学习，特此花了几个小时整理了这些文章。 showImg(https://segmentfault.com/img/remote/1460000013241596); 让你收获满满！码个蛋从2017年02月20...

wangtdgoodluck 2019-07-30 15:40 评论0 收藏0
技术存档：建站（一）

摘要：自建主要花费在购买云服务器上和静态资源托管上，剩余工作一力承担。写这系列文章的初衷是：对自己知识面广度和深度的确定，并以此调整后续的发展和学习方向。希望能达到温故而知新的效果。选择从建站入手，是因为这个是最常见的要求。对于公司而言，网站是展示公司主旨、业务、沟通方式、宣传营销的必选方案，一个符合公司形象的高质量官网，必然能让客户留下良好的第一印象。，对个人而言，博客是表达其特有的思...

chnmagnus 2019-05-29 17:52 评论0 收藏0
12个令人惊叹的CSS实验项目

摘要：看看这些惊人的纯实验，也许你自己也可以尝试一下。项目链接叠叠高游戏你可以不用来编写一个游戏。这个纯粹用实现的叠叠高游戏看上去很简单，但是很有趣，而且图形也很漂亮。项目链接鬼影渐变效果按钮令人惊讶的是它是只用编写的。翻译：疯狂的技术宅原文：https://1stwebdesigner.com/12... 本文首发微信公众号：jingchengyideng欢迎关注，每天都给你推送新鲜...

LiuZh 2019-08-30 15:55 评论0 收藏0
12个令人惊叹的CSS实验项目

摘要：看看这些惊人的纯实验，也许你自己也可以尝试一下。项目链接叠叠高游戏你可以不用来编写一个游戏。这个纯粹用实现的叠叠高游戏看上去很简单，但是很有趣，而且图形也很漂亮。项目链接鬼影渐变效果按钮令人惊讶的是它是只用编写的。翻译：疯狂的技术宅原文：https://1stwebdesigner.com/12... 本文首发微信公众号：jingchengyideng欢迎关注，每天都给你推送新鲜...

wow_worktile 2019-08-02 14:11 评论0 收藏0
12个令人惊叹的CSS实验项目

摘要：看看这些惊人的纯实验，也许你自己也可以尝试一下。项目链接叠叠高游戏你可以不用来编写一个游戏。这个纯粹用实现的叠叠高游戏看上去很简单，但是很有趣，而且图形也很漂亮。项目链接鬼影渐变效果按钮令人惊讶的是它是只用编写的。翻译：疯狂的技术宅原文：https://1stwebdesigner.com/12... 本文首发微信公众号：jingchengyideng欢迎关注，每天都给你推送新鲜...

CastlePeaK 2019-08-26 13:30 评论0 收藏0