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

cc17 發布于2019-08-23 15:24 / 1789人閱讀

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

最近在逛知乎時，意外發現了一組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動畫效果

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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