Ghost配置6——首頁太陽系動畫效果

cc17 發(fā)布于2019-08-23 15:24 / 1800人閱讀

摘要：最近在逛知乎時，意外發(fā)現(xiàn)了一組效果，其中一個太陽系運(yùn)行的動畫吸引了我。于是我決定把這個效果加到個人博客的首頁頭部中來。引入修改，在中加入引用。以上工作完成后，重啟即可查看博客的新動畫效果。

最近在逛知乎時，意外發(fā)現(xiàn)了一組CSS效果，其中一個太陽系運(yùn)行的動畫吸引了我。于是我決定把這個效果加到個人博客的首頁頭部中來。

修改首頁

首頁對應(yīng)的文件是index.hbs，找到其中的header內(nèi)容，并修改為：


    
        
        
        
        
        
        
        
        
        
        
        
    
    
        {{> "site-nav"}}

編寫CSS

css代碼在作者的codepen上有說明，注意選擇編譯后的css進(jìn)行查看。我個人寫了一個solar.css保存其內(nèi)容。

.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即可查看博客的新動畫效果。

云服務(wù)器 GPU云服務(wù)器浮動效果動畫翻轉(zhuǎn)動畫效果仿360首頁效果 html動畫效果

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/101997.html

相關(guān)文章

「碼個蛋」2017年200篇精選干貨集合

摘要：讓你收獲滿滿碼個蛋從年月日推送第篇文章一年過去了已累積推文近篇文章，本文為年度精選，共計(jì)篇，按照類別整理便于讀者主題閱讀。本篇文章是今年的最后一篇技術(shù)文章，為了讓大家在家也能好好學(xué)習(xí)，特此花了幾個小時整理了這些文章。 showImg(https://segmentfault.com/img/remote/1460000013241596); 讓你收獲滿滿！碼個蛋從2017年02月20...

wangtdgoodluck 2019-07-30 15:40 評論0 收藏0
技術(shù)存檔：建站（一）

摘要：自建主要花費(fèi)在購買云服務(wù)器上和靜態(tài)資源托管上，剩余工作一力承擔(dān)。寫這系列文章的初衷是：對自己知識面廣度和深度的確定，并以此調(diào)整后續(xù)的發(fā)展和學(xué)習(xí)方向。希望能達(dá)到溫故而知新的效果。選擇從建站入手，是因?yàn)檫@個是最常見的要求。對于公司而言，網(wǎng)站是展示公司主旨、業(yè)務(wù)、溝通方式、宣傳營銷的必選方案，一個符合公司形象的高質(zhì)量官網(wǎng)，必然能讓客戶留下良好的第一印象。，對個人而言，博客是表達(dá)其特有的思...

chnmagnus 2019-05-29 17:52 評論0 收藏0
12個令人驚嘆的CSS實(shí)驗(yàn)項(xiàng)目

摘要：看看這些驚人的純實(shí)驗(yàn)，也許你自己也可以嘗試一下。項(xiàng)目鏈接疊疊高游戲你可以不用來編寫一個游戲。這個純粹用實(shí)現(xiàn)的疊疊高游戲看上去很簡單，但是很有趣，而且圖形也很漂亮。項(xiàng)目鏈接鬼影漸變效果按鈕令人驚訝的是它是只用編寫的。翻譯：瘋狂的技術(shù)宅原文：https://1stwebdesigner.com/12... 本文首發(fā)微信公眾號：jingchengyideng歡迎關(guān)注，每天都給你推送新鮮...

LiuZh 2019-08-30 15:55 評論0 收藏0
12個令人驚嘆的CSS實(shí)驗(yàn)項(xiàng)目

摘要：看看這些驚人的純實(shí)驗(yàn)，也許你自己也可以嘗試一下。項(xiàng)目鏈接疊疊高游戲你可以不用來編寫一個游戲。這個純粹用實(shí)現(xiàn)的疊疊高游戲看上去很簡單，但是很有趣，而且圖形也很漂亮。項(xiàng)目鏈接鬼影漸變效果按鈕令人驚訝的是它是只用編寫的。翻譯：瘋狂的技術(shù)宅原文：https://1stwebdesigner.com/12... 本文首發(fā)微信公眾號：jingchengyideng歡迎關(guān)注，每天都給你推送新鮮...

wow_worktile 2019-08-02 14:11 評論0 收藏0
12個令人驚嘆的CSS實(shí)驗(yàn)項(xiàng)目

摘要：看看這些驚人的純實(shí)驗(yàn)，也許你自己也可以嘗試一下。項(xiàng)目鏈接疊疊高游戲你可以不用來編寫一個游戲。這個純粹用實(shí)現(xiàn)的疊疊高游戲看上去很簡單，但是很有趣，而且圖形也很漂亮。項(xiàng)目鏈接鬼影漸變效果按鈕令人驚訝的是它是只用編寫的。翻譯：瘋狂的技術(shù)宅原文：https://1stwebdesigner.com/12... 本文首發(fā)微信公眾號：jingchengyideng歡迎關(guān)注，每天都給你推送新鮮...

CastlePeaK 2019-08-26 13:30 評論0 收藏0