一. 小目標

實現長頁截屏的滑動效果。

二. 分析過程

首先，在鼠停留在圖片上的時候需要觸發動畫效果，這裡可以用偽類:hover來實現，把實現動畫效果的CSS代碼寫在:hover裡。

因為要通過CSS來控制圖片的顯示，所以這裡用background-image來加載圖片，再用background-postition來控制圖片的位置。

最後就用animation指定@keyframes，並設置持續時間即可。

三. 實現

1
2
3
4
5
6
7
8
9

/* html 略 */
.image{
   width: 400px;
    height: 500px;
    background-image: url(https://gw.alipayobjects.com/zos/rmsportal/GnDiHuTNxcXpSaJxhmRl.jpg);
    background-position-y: 0%;
    background-size: cover;
    background-repeat: no-repeat;
}

因為這段CSS是加在一個div上，而div本身沒有高度和寬度，所以需要加上高度和寬度。

注意一點，一般在使用background-size時要加background-repeat: no-repeat，否則如果圖片太小，會在容器不停的重複來填滿容器。有興趣的讀者可以試一下把width或height調大，然後刪掉background-repeat。

background-position-y是設置了圖片垂直方向上的開始位置，這裡0%就是由最上面開始顯示。backgroun-size: cover會把圖片盡可能的拉大以填充整個圖片，我們這個圖片是height大於width，所以會截斷了下面的一部份，截斷了的部份會通過動態去變化background-position-y慢慢顯示。

1
2
3
4
5
6
7
8
9
10
11

@keyframes scrollUpAndDown{
  0%{
    background-position-y: 0%;
  }
  50%{
    background-position-y: 100%;
  }
  100%{
    background-position-y: 0%;
  }
}

要使用animation就必須掌握@keyframes，基本可以這樣理解，@keyframes就是幀的一個變化過程，可以用百份比或者from to的方式來聲明變化的過程，在裡面再聲明要變化的屬性。上面的代碼就是說，前半段動畫先把background-position-y由0%遞增至100%，後半段再將其遞減至0%。

1
2
3
4
5

.image:hover{
  animation: scrollUpAndDown 8s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

最後便是如何觸發動畫的問題，這裡我們用:hover，當鼠標停留在圖片上的時候觸發。animation的第一個參數是@keyframes的名字，第二個參數是動畫持續的時間，可用s或ms作單位。animation-timing-function是指定動畫的速度函數，ease-in-out是以低速開始和結束。其它選項有linear、ease、ease-in、ease-out、cubic-bezier(x,x,x,x)等等，感興趣的讀者可以自行換個選項試試不的效果。

至此我們的這個簡單的動畫就已經完成了。

完整的代碼在這裡，大家加油！

一. 安裝Hugo

在https://github.com/gohugoio/hugo/releases上選擇合適的Hugo版本，如果是Mac使用者且有Homebrew，則可以在終端輸入

1

brew install hugo

安裝完成後，可在終端輸入

1

hugo version

二. 創建Hugo項目

通過hugo new site Hugo-Example創建一個名為Hugo-Example的文件夾，裡面會有Hugo幫你初始化好的文件；
Hugo-Example是你的博客的名稱

創建完項目之後，需要在https://themes.gohugo.io/選擇你喜歡的模版。

這裡我選擇了Swift（https://github.com/onweru/hugo-swift-theme）

如圖所示，先在終端打開你創建的Hugo項目，這裡是Hugo-Example，然後輸入git init進行Git的初始化，再添加你選擇的模版，輸入git submodule add https://github.com/onweru/hugo-swift-theme.git themes/hugo-swift-theme

模版相關的文件會放在themes文件夾下，在裡面找到exampleSite文件夾，把config.toml複制至項目根目錄下，取代已有的config.toml，config.toml是Hugo的配置文件。

輸入hugo server來運行你的Hugo項目。

如果操作順利的話，在瀏覽器輸入localhost:1313，有可能端口號會不一樣，則會顯示下圖結果

三. 上傳到GitHub發佈

剛剛已經把項目進行了Git的初始化，現要只要把Hugo項目構建一次，然後上傳到Push到GitHub即可。
構建Hugo項目的命令是hugo，如果要把草稿也加進來，則用hugo -D

這裡要注意下面兩個配置項，在config.toml裡面，baseURL是你這個Hugo項目的域名，如果只是放在GitHub，則按照GitHub Project Page的網址來寫就行。

publishDir是這個Hugo項目運行了hugo命令後的目標文件夾，配置成docs就代表Build後的文件放在docs裡

1
2

baseURL = "http://www.xxx.top"
publishDir = "docs"

上傳到GitHub後，到倉庫的Setting頁面找到上面截圖這個配置，選擇第二個選項，使用docs文件夾構建GitHub Project Page，docs便是在上配置的文件夾。
上面的網址則需要寫到baseURL配置裡。

等待幾分鐘後，便可以訪問該網址看到你的博客了