# 純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***
Sign in with Wallet
Connect another wallet