---
# System prepended metadata

title: 純CSS網頁page-transition

---

# 純CSS網頁page-transition
嗨嗨各位我是一小的佳勳:D
我選擇的主題是網頁的一個常用的方法

起因是我的主機空間有限，不能架多個網頁，但又想要有分類的內容，最後選擇學習tab切換的寫法

~~覺得這樣寫超酷的~~ d(･∀･)b

---

### 希望呈現的效果 
如下:
{%youtube hOYpN73F8c8 %}

讓他在不同的頁面中切換，而不改變主要的網址
我們可以使用很多種方式達成類似的效果 如
* 純CSS
* 原生js寫法
* jQery特效
* Vue3等等的

最後我選擇使用純CSS(~~因為我JS太爛了~~)

---

### 開始建置
```
<a id="one">Section 1</a>
<a id="two">Section 2</a>
<a id="three">Section 3</a>
```
先設定我們要使用的tab
```
body, html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    text-align: center;
    height: 100%;
    overflow: hidden;
    margin: inherit;
  }
```
設定網頁介面的初始值
其中`overflow: hidden`可以讓多出版面外的圖像隱藏，也是這個形成的一個關鍵
```
<nav>
  <div class="container">
    <ul>
      <li><a href="#one">Section 1</a></li>
      <li><a href="#two">Section 2</a></li>
      <li><a href="#three">Section 3</a></li>
    </ul>
  </div>
</nav>
```
標籤`<nav>`可以做為網頁中提供導航欄連結的區域
也可以做成下拉式表單

在nav裡面新增ul、li
ul: 標籤用來定義一個無排序的項目清單列表
li: 標籤通常用來顯示個別項目的標籤，可用來顯示文字清單或超連結清單等等

裡面用`<a>`做一個頁內連結 並連結到上面的id
```
nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
    background: #370926;
  }
  nav ul li {
    display: inline-block;
  }
  nav ul li a {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.875rem;
    display: block;
    text-decoration: none;
    padding: 6px 15px;
  }
  nav ul li a:hover {
    color: #fff;
  }
```
接著將我們的連結欄套上樣式
就是排版上的東東了
其中的`display`和`position`在CSS是非常好用的屬性
前者可以拿來改變物件的基礎特性
後者用來設定「物件定位時所要的參考對像」
學會活用他們會在排版上有很大的幫助

順帶一提`hover`代表當你的滑鼠指向它時 會有其他的反應呦(ﾉ>ω<)ﾉ
```
//html
<section id="one">
  <h1>Section 1</h1>
</section>

<section id="two">
  <h1>Section 2</h1>
</section>

<section id="three">
  <h1>Section 3</h1>
</section>

//css
section {
    height: 100%;
    width: 100%;
    display: table;
    pointer-events: none;
    z-index: 0;
    -webkit-transition: transform 0.45s cubic-bezier(0, 0, 0.21, 1);
    transition: transform 0.45s cubic-bezier(0, 0, 0.21, 1);
  }
  
  section h1 {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    color: #fff;
    font-weight: lighter;
  }
```
還有我們的內文版面
可以使用`transition`做出超蚌的簡易動畫
主要是用於縮放
同為CSS動畫屬性的還有`transform`和`animation`
同時用起來可以做出不少有趣的小動畫喔

---

### 動畫範例
以下是網上大佬用純CSS做的動畫
orz orz orz

<iframe height="300" style="width: 100%;" scrolling="no" title="pure CSS sponge" src="https://codepen.io/blackmusic-josh/embed/poZXeYq?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/blackmusic-josh/pen/poZXeYq">
  pure CSS sponge</a> by blackmusic-josh (<a href="https://codepen.io/blackmusic-josh">@blackmusic-josh</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

---

### 繼續coding
```
#one {
    background: #42113C;
  }
  
  #two {
    background: #618B25;
  }
  
  #three {
    background: #6BD425;
  }
  
  
  
  a[id="one"]:target ~ #one {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  
  a[id="two"]:target ~ #two {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  
  a[id="three"]:target ~ #three {
    -webkit-transform: translate3d(0, -200%, 0);
    transform: translate3d(0, -200%, 0);
  }
```
這個是最後的圖層移位，設定背景顏色
`a[id="one"]:target ~ #one`能夠讓我們切換到我們所想要的頁面
點擊後會選取 `~`是同層全體選擇器
實際上有點像是點了之後將版面二移上去，取代版面一，再將其餘的版面隱藏
而`-webkit`這個前綴屬性是用來獲得瀏覽器的支援，實際上沒什麼用，不加也行

---

### 專案範例
此為本次專案之範例程式

<iframe height="300" style="width: 100%;" scrolling="no" title=" CSS-Page-Transition範例" src="https://codepen.io/blackmusic-josh/embed/mdjZmGj?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/blackmusic-josh/pen/mdjZmGj">
   CSS-Page-Transition範例</a> by blackmusic-josh (<a href="https://codepen.io/blackmusic-josh">@blackmusic-josh</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

這有點像一個模板
可以將其套用或者在其他專案中活用
將來也會再繼續研究的@_@

---

### 參考資料
附上參考資料:
https://www.webdesigns.com.tw/jquery_tab.asp 使用jQuery特效做出Tab頁籤切換效果
https://ithelp.ithome.com.tw/articles/10276424?sc=iThomeR -超實用！tab頁籤切換:data-
https://github.com/Patalin/CSS-Page-Transition CSS-Page-Transition原作者
https://ithelp.ithome.com.tw/articles/10233409 nav補充
https://ithelp.ithome.com.tw/articles/10200365 Transition補充

---

感謝各位的閱讀啦
如果有說明的錯誤請告訴我:pray:(⁠っ⁠.⁠❛⁠ ⁠ᴗ⁠ ⁠❛⁠.⁠)⁠っ

***2023/2/10***









