Ghost配置6——首頁太陽系動(dòng)畫效果

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

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

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

修改首頁

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


    
        
        
        
        
        
        
        
        
        
        
        
    
    
        {{> "site-nav"}}

編寫CSS

css代碼在作者的codepen上有說明，注意選擇編譯后的css進(jìn)行查看。我個(gè)人寫了一個(gè)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即可查看博客的新動(dòng)畫效果。

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/101997.html

相關(guān)文章

「碼個(gè)蛋」2017年200篇精選干貨集合

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

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

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

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

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

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

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

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

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

CastlePeaK 2019-08-26 13:30 評(píng)論0 收藏0