實驗介紹
手風琴效果一直是比較流行的頁面特效之一，本節課將會帶大家看一個不一樣的手風琴效果，通過 JavaScript 實現全屏手風琴。最終效果如下：
知識點
- 視口單位
- 絕對定位與相對定位
- transform 屬性
- 僞元素 before 和 after
- 通過 CSS3 完成動畫
- JavaScript 添加類
本實驗完整代碼獲取命令如下：
wget https://labfile.oss.aliyuncs.com/courses/2674/demo.zip
unzip demo.zip
模塊基本結構
我們先學習模塊的基本結構，新建 index.html 和 index.css，輸入以下代碼。
index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JavaScript 實現全屏手風琴</title>
</head>
<link rel="stylesheet" href="./index.css" />
<body>
<div class="cont">
<!-- 手風琴的大盒子 -->
<div class="cont__inner"></div>
</div>
</body>
</html>
index.css：
/* 第一部分 */
*,
*:before,
*:after {
/* box-sizing: border-box，爲元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製，不會因爲設置了邊距而使元素寬高改變 */
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: #1f1f1f;
font-family: "Open Sans", Helvetica, Arial, sans-serif;
}
.cont {
position: relative;
overflow: hidden;
height: 100vh;
padding: 80px 70px;
}
.cont__inner {
position: relative;
height: 100%;
background: #fff;
執行如下操作預覽頁面：
預覽效果：
注意：padding 是自己加的，跟代碼無關，主要是方便理解 padding 的作用在哪，背景色也只是爲了顯示 cont__inner。後續會刪除。
代碼重點講解之—— viewport：
viewport：可視窗口，也就是瀏覽器。視口單位主要包括以下 4 個：
- vw : 1vw 等於視口寬度的 1%。
- vh : 1vh 等於視口高度的 1%。
- vmin : 選取 vw 和 vh 中最小的那個。
- vmax : 選取 vw 和 vh 中最大的那個。
100vh 代表整個瀏覽器可見頁面的高度，100vw 就是整個寬度。
模塊佈局
修改 index.html，在 cont__inner 下加入以下代碼：
<div class="cont__inner">
<!-- 每一塊圖片 -->
<div class="el"></div>
</div>
修改 index.css，新增其樣式：
/* 第二部分 */
.el {
position: absolute;
left: 0;
top: 0;
width: 19.2%;
height: 100%;
background: #ccc;
}
預覽效果：
這只是其中一個模塊，修改 index.html 加入剩下的模塊：
<div class="cont__inner">
<!-- 每一塊圖片 -->
<div class="el"></div>
<div class="el"></div>
<div class="el"></div>
<div class="el"></div>
<div class="el"></div>
</div>
由於 .el 使用了絕對定位，這個時候模塊肯定都會全部疊加在最左邊，所以我們需要修改 index.css，加入以下代碼：
/* :nth-child(n) 選擇器匹配屬於其父元素的第 n 個子元素，不論元素的類型。*/
/* 這裏代表第一個el */
.el:nth-child(1) {
/* -webkit 前綴是表示兼容有 webkit 的瀏覽器，
webkit 內核的瀏覽器有谷歌瀏覽器、Safari 瀏覽器、搜狗高速瀏覽器等 */
-webkit-transform: translate3d(0%, 0, 0);
transform: translate3d(0%, 0, 0);
-webkit-transform-origin: 50% 50%; /* 設置旋轉元素的基點位置 */
transform-origin: 50% 50%;
}
.el:nth-child(2) {
-webkit-transform: translate3d(105.2083333333%, 0, 0);
transform: translate3d(105.2083333333%, 0, 0);
-webkit-transform-origin: 155.2083333333% 50%;
transform-origin: 155.2083333333% 50%;
}
.el:nth-child(3) {
-webkit-transform: translate3d(210.4166666667%, 0, 0);
transform: translate3d(210.4166666667%, 0, 0);
-webkit-transform-origin: 260.4166666667% 50%;
transform-origin: 260.4166666667% 50%;
}
.el:nth-child(4) {
-webkit-transform: translate3d(315.625%, 0, 0);
transform: translate3d(315.625%, 0, 0);
-webkit-transform-origin: 365.625% 50%;
transform-origin: 365.625% 50%;
}
.el:nth-child(5) {
-webkit-transform: translate3d(420.8333333333%, 0, 0);
transform: translate3d(420.8333333333%, 0, 0);
-webkit-transform-origin: 470.8333333333% 50%;
transform-origin: 470.8333333333% 50%;
預覽效果：
代碼重點講解之—— transform-origin：
transform-origin 是變形原點，原點就是元素繞着旋轉或變形的點，該屬性只有在設置了 transform 屬性的時候才起作用，如果在不設置的情況下，元素的基點默認的是其中心位置。
語法：
transform-origin: x-axis y-axis z-axis;
- x-axis：定義視圖被置於 X 軸的何處。
- y-axis：定義視圖被置於 Y 軸的何處。
- z-axis：定義視圖被置於 Z 軸的何處。
模塊樣式
修改 index.html，在第一個 .el 下加入以下代碼：
<!-- 每一塊圖片 -->
<div class="el">
<!-- 圖片、文字、按鈕部分 -->
<div class="el__overflow">
<div class="el__inner">
<!-- 主體圖片和遮罩層部分 -->
<div class="el__bg"></div>
<!-- 圖片中間文字內容部分 -->
<div class="el__preview-cont">
<h2 class="el__heading">Section 1</h2>
</div>
<!-- 圖片放大後的標題和關閉按鈕部分 -->
<div class="el__content">
<div class="el__text">Whatever</div>
<div class="el__close-btn"></div>
</div>
</div>
</div>
<!--數字部分 -->
<div class="el__index">
<div class="el__index-back">1</div>
<div class="el__index-front">
<div class="el__index-overlay" data-index="1">1</div>
</div>
</div>
</div>
分析一下 .el 的結構，每個 .el 包含兩部分，一部分是包含了圖片、文字以及按鈕（el__overflow），它的高度需要繼承自父級（.el）的百分百，另一部分是底部的數字部分（el__index）。
el__overflow 結構解釋
el__overflow 中包含 el__inner，el__inner 是主要內容，包含三部分：
- 主體圖片和遮罩層部分（
el__bg），其中僞元素el__bg:before是圖片部分，el__bg:after是遮罩層部分。 - 圖片中間文字內容部分（
el__preview-cont）。 - 圖片放大後的標題和關閉按鈕部分（
el__content）。
完整學完本課程後，將習得以下知識點：
- 視口單位
- 絕對定位與相對定位
- transform 屬性
- 僞元素 before 和 after
- 通過 CSS3 完成動畫
- JavaScript 添加類
前端特效需要很多 CSS 操作，課程中的動畫效果有一些抽象需要大家多思考才能理解。本課程是 JavaScript 的簡單課，所以對於 JavaScript 部分是比較簡單且容易理解的，希望大家多多動手，不要只進行簡單的複製粘貼，才能更好的學習本課程。