目錄
一.HTML5（取代 HTML4 + XHTML）
- 廣義上的 HTML5：擁有強大的技術集，這些技術是指：
HTML5、CSS3、javascript1.語義化標籤
- 新增語義化標籤：
語義化標籤：針對搜索引擎，可多次使用，移動端支持比較友好在“IE9”瀏覽器中，需要把語義化標籤轉換成 塊級元素header, nav, section { <!-- IE9 中，語義標籤需要轉換成 塊級元素 --> display: block; ... } <body> <!-- 可以書寫多個語義標籤 --> <header> header </header> <header> header </header> ... </body>2.音/視頻標籤
- audio 音頻標籤：
- 不同瀏覽器 支持 不同格式，所以要準備多個音頻文件，會按照資源給的順序 播放音頻
- 一般 .ogg .mp3 可以支持絕大部分瀏覽器
- chrome 禁用了 autoplay 屬性，除非靜音播放，muted 屬性（靜音播放）
- controls：顯示播放按鈕等控件
- loop：循環播放
- poster：未播放時展示的海報
<audio src="media/snow.mp3" controls autoplay></audio> <audio controls> <source src="media/snow.mp3" type="audio/mpeg" /> <source src="media/snow.ogg" type="audio/ogg" /> 您的瀏覽器不支持播放聲音（ 此文字在上述兩種音頻均不可用時出現 ） </audio>
- video 視頻標籤：
<!-- <video src="media/video.mp4" controls="controls"></video> --> <video controls="controls" autoplay muted loop poster="media/pig.jpg"> <source src="media/video.mp4" type="video/mp4"> <source src="media/video.ogg" type="video/ogg"> </video>3.input 標籤
- type="email" ：限制用戶輸入必須爲Email類型
- type="url" ：限制用戶輸入必須爲URL類型
- type="date / time" ：限制用戶輸入必須爲日期 / 時間類型
- type="number" ：限制用戶輸入必須爲數字類型
- type="tel" ：限制用戶輸入必須爲手機號碼
- type="search" ：搜索框 會出現 x 方便一次刪除輸入內容
- type="color" ：生成一個顏色選擇表單
4.表單屬性
- required ：內容不能爲空
- placeholder ：提示文本，存在默認值將不顯示
- autofocus ：自動聚焦
- autocomplete ："off / on" 瀏覽器會提示歷史輸入，爲了隱私一般設置爲off
- multiple ：多選文件提交，file默認選一個文件
用戶名: <input type="text" required="required" placeholder="請輸入用戶名" autofocus="autofocus" name="username" autocomplete="off"> <input type="submit" value="提交"> 上傳頭像: <input type="file" name="" id="" multiple="multiple">
二.CSS3選擇器
- CSS3現狀：瀏覽器支持度差，需要添加 私有前綴，移動端優於PC端
1.屬性選擇器 [ ]
- 類選擇器、屬性選擇器、權重爲 10
/* 選擇的是： 既是button 又有 disabled 這個屬性的元素 */ button[disabled] {} /* 1.直接寫屬性 */ input[type="search"] {} /* 2. 屬性等於值 */ div[class^="icon"] {} /* 3. 以某個值開頭的 屬性值 */ div[class$="icon"] {} /* 4. 以某個值結尾的 */ div[class*="icon"] {} /* 5. 可以在任意位置的 */ <body> <button disabled="disabled">按鈕</button> <div class="icon1">圖標1</div> <div class="iicon3">圖標4</div> <div class="absicon">圖標5</div> </body>2.結構僞類選擇器 ：
- 類選擇器、屬性選擇器、權重爲 10
<style> ul li:first-child {} /* 父元素中第一個子元素 */ ul li:last-child {} /* 父元素中最後一個子元素 */ ul li:nth-child(8) {} /* 父元素中第n個子元素 */ /* n 可是關鍵詞 even 是偶數 odd 是奇數 */ /* n 可是公式 2n 是偶數 2n+1 是奇數 5n 是5的倍數 */ ul li:nth-child(even/2n) {} ul li:nth-child(-n+5) {} /* -n + 5 就是選擇前面5個 */ /* div span:nth-child(1) {選不到span 會選擇出p 因爲p是div的第一個子元素} */ /* 總結： :nth-child(n) 選擇父元素裏面的 第n個孩子， 它不管裏面的孩子 是span還是p */ /*選擇 span 的方法 */ div span:first-of-type {} div span:last-of-type {} div span:nth-of-type(2) {} </style> <body> <div> <p>我是一個p標籤</p> <span>我是span標籤</span> <span>我是span標籤</span> </div> <!-- ul 裏面我們只允許放li 所以 nth-child = nth-of-type --> <ul> <li>1</li> ... <li>8</li> <li>9</li> <li>10</li> </ul> </body>
- 區分
nth-child和nth-of-type：
nth-child選擇父元素裏面的第幾個子元素，子元素可能不是同種類型，如span p同等看待nth-of-type選擇指定類型的元素3.僞元素選擇器 ::
- 僞類選擇器，權重爲 1
div::before { content: "我"; /* before 和 after 必須有 content 屬性，可以爲空 */ /* before 和 after 創建的是一個行內元素，要轉換類型設置寬高 */ display: inline-block; width: 100px; ...} div::after { content: "小豬佩奇"; ...} <body> <div>是</div> </body>
- 僞類選擇器注意事項：
before和after必須有content屬性before在內容前面，after 在內容後面before和after創建的是一個行內元素，要轉換爲行內塊元素設置寬高- 創建出來的元素在 DOM 中查找不到，所以稱爲僞元素
- 僞元素權重爲 1
- 應用：僞元素字體圖標：
@font-face { font-family: 'icomoon'; src: url('fonts/icomoon.eot?cv013x'); ...} p::after { content: '\ea50'; /* 字體圖標代碼，可自行查看 */ position: absolute; top: 10px; right: 10px; font-family: 'icomoon'; /* 務必務必務必不要忘記字體圖標需要引用自定義字體！ */ } <body> <p></p> </body>
三.2D 轉換（transform）
1.定義
2D轉換：改變標籤在二維平面上的位置和形狀，元素如下：
- 移動：
translate- 旋轉：
rotate- 縮放：
scale2.translate 語法（移動）
2D移動指：水平X、垂直Y方向上的移動，類似 定位- transform: translate(x, y); ：transform: translate(100px, 100px);
- transform:translate:(50%,50%);：%是相對於 本身 的寬高計算的
- 只移動x座標：
- transform: translate(100px, 0);
- transform: translateX(100px);
- translate 對 行內元素 是無效的，比如給 <span>設置，不會生效
- 拓展：讓盒子實現水平垂直居中，使用 translate 就不需要計算了
- translate(-50%, -50%) ：盒子往上往左走，自己高度的一半
3.rotate 語法（旋轉）
rotate()裏面跟度數，單位是deg- 角度爲正時，順時針，角度爲負時，逆時針
- 默認旋轉的中心點是：元素中心點
- CSS書寫三角形並旋轉：
div { position: relative; ...} div::after {/* 僞類選擇器相當於 添加行內元素 absolute自動使之變成塊元素 */ content: ""; position: absolute; top: 8px; right: 15px; width: 10px; height: 10px; border-right: 1px solid #000; /* 只讓右邊和底邊顯示 構造一個直角 */ border-bottom: 1px solid #000; transform: rotate(45deg); /* 順時針旋轉直角45° 使之看起來向下 */ transition: all 0.2s; /* 過渡寫到本身上，誰做動畫給誰加 */ } /* 鼠標經過div 裏面的三角旋轉 */ div:hover::after { transform: rotate(225deg); /* 使直角向上旋轉 注意旋轉角度225 = 45 + 180 */ } <body> <div></div> </body>
- 設置旋轉中心點：transform-origin:x y
- 注意：x 和 y 用 空格 隔開
- x y 默認旋轉的中心點是元素的中心 (50% 50%)，等價於
centercenter- 可以給 x y 設置像素：transform-origin: 50px 50px;
- 可以給 x y 設置方位名詞：transform-origin: left bottom;
4.scale 語法（縮放）
- 注意：x 與 y使用 逗號 進行分隔
transform: scale(2): 只寫一個參數，第二個參數就和第一個參數一致，寬高都放大兩倍transform:scale(0.5, 1): 寬縮小一倍，高保持不變scale最大的優勢：可以設置轉換中心點縮放，默認以中心點縮放，而且不影響其他盒子- 分頁按鈕實例：
li { float: left;width: 30px;height: 30px; border: 1px solid pink;margin: 10px; text-align: center;line-height: 30px;list-style: none; border-radius: 50%; cursor: pointer; transition: all .4s; } li:hover { transform: scale(1.2);} <body> <ul> <li>1</li> ... <li>7</li> </ul> </body>5.2D 轉換綜合寫法
- 同時使用多個轉換，其格式爲
transform: translate() rotate() scale()transform: translate(150px, 50px) rotate(180deg) scale(1.2);- 順序會影響到轉換的效果(先旋轉會改變座標軸方向)，位移放到最前面
四.動畫（animation）
1.動畫使用步驟
- 定義動畫：@keyframes...
- 調用定義好的動畫
/* 1. 定義動畫 */ @keyframes move { 0% {transform: translateX(0px); /* 開始狀態 */} 100% { transform: translateX(1000px); /* 結束狀態 */} } div { width: 200px; height: 200px; background-color: pink; /* 2. 調用動畫 */ animation-name: move; /* 動畫名稱 */ animation-duration: 2s; /* 持續時間 */ }2.動畫序列
- 0% 是動畫的開始，100% 是動畫的完成。這樣的規則就是動畫序列
- from to 等價於 0% 和 100%
/* @keyframes move { from { transform: translate(0, 0);} to { transform: translate(1000px, 0);} } */ @keyframes move { 0% {transform: translate(0, 0);} 25% {transform: translate(1000px, 0);} 50% {transform: translate(1000px, 500px);} 75% {transform: translate(0, 500px);} 100% {transform: translate(0, 0);}} div { width: 100px; height: 100px; background-color: pink; animation-name: move; animation-duration: 10s; }3.動畫常見屬性
- @keyframes ：規定動畫，關鍵幀
- animation ：所有動畫屬性的簡寫屬性，除了 animation-play-state 屬性
- animation-name（必寫）：規定 @keyframes 動畫的名稱
- animation-duration（必寫） ：規定動畫完成一個週期所花費的秒或毫秒，默認是0
- animation-timing-function ：規定動畫的速度曲線，默認是“ease”先快後慢再快 “linear”勻速
- animation-delay：規定動畫何時開始，默認是0
- animation-iteration-count ：規定動畫重複播放的次數，默認是1，還有 infinite"無限循環"
- animation-direction ：規定動畫是否在下一週期逆向播放，默認是 “normal“, alternate"逆播放”
- animation-play-state ：規定動畫是否播放或暫停，默認是 "running", 還有 "pause"，鼠標經過暫停
- animation-fill-mode ：規定動畫結束後狀態，保持現狀 forwards 回到起始 backwards
4.動畫簡寫
- animation: 動畫名稱 持續時間 運動曲線 何時開始 播放次數 是否反方向 起始與結束狀態
- animation: name duration timing-function delay iteration-count direction fill-mode
- 簡寫屬性裏面不包含
animation-paly-state- 暫停動畫
animation-paly-state: paused; 經常和鼠標經過等其他配合使用- 要想動畫走回來，而不是直接調回來：
animation-direction: alternate- 盒子動畫結束後，停在結束位置：
animation-fill-mode: forwards動畫實例之大數據熱點圖：5.速度曲線 steps()
- 模仿打印機打字效果用到 steps()：分幾步來完成動畫
div { font-size: 20px; width: 0; height: 30px; white-space: nowrap; /* 讓文字強制一行內顯示*/ overflow: hidden; /* steps 就是分幾步來完成動畫 有了steps 就不寫 ease / linear */ animation: w 4s steps(10) forwards停留在打印完的樣子; } @keyframes w { 0% { width: 0;} 100% { width: 200px;} /* 總共10個字，每個字像素20px，10*20=200 模仿打印 */ } <body> <div>世紀佳緣我在這裏等你</div> </body>6.奔跑的熊
- 結論：元素可以添加多個動畫， 用逗號分隔
div { position: absolute; width: 200px; height: 100px; background: url(media/bear.png) no-repeat; /* 元素可以添加多個動畫， 用逗號分隔 */ animation: bear .4s steps(8) infinite, move 3s forwards; } @keyframes bear {/* 這個動畫是實現熊的跑步動作 通過讓背景圖左移實現 */ 0% {background-position: 0 0; } 100% {/* 熊的背景圖片是向左走的 所以是負值 左上負 右下正 */ background-position: -1600px 0; }} @keyframes move {/* 這個動畫是實現熊的位移 */ 0% { left: 0; } /* 左移自身的 50% 實現居中效果 */ transform: translateX(-50%);}} <body> <div></div> </body>
五.3D 轉換
1.三維座標系
- x 軸：水平向右 -- 注意：x 軸右邊是正值，左邊是負值
- y 軸：垂直向下 -- 注意：y 軸下面是正值，上面是負值
- z 軸：垂直屏幕 -- 注意：往外邊的是正值，往裏面的是負值
2.3D 轉換元素
3D位移：translate3d(x, y, z)3D旋轉：rotate3d(x, y, z)- 透視：
perspctive3D呈現：transfrom-style3.3D 位移 translate3d()
3D位移：在2D移動的基礎上多加了 z 軸移動方向transform: translateX(100px)：僅在 x 軸上移動transform: translateZ(100px)：僅僅是在 z 軸上移動，此處只能跟 px單位transform: translate3d(x, y, z)：x, y, z 對應的值不能省略，可用 0 進行填充- 因爲z軸是垂直屏幕，由裏指向外面，所以默認 看不到 元素在z軸的方向上移動，除非設置透視
4.透視 perspective
- 想要網頁產生
3D效果需要 透視，單位：像素- 透視也稱視距，即人的眼睛到屏幕的距離
- 視距越小成像越大，越大成像越小
- 注意：透視 需要寫在 被視察元素 的 父盒子 上面
body { perspective: 200px; /* 透視寫到被觀察元素的父盒子上面 */ } div { width: 200px; height: 200px; background-color: pink; transform: translate3d(100px, 100px, 0); /* xyz是不能省略的，沒有就寫0 */ }
translateZ與perspecitve的區別：perspecitve給 父級 進行設置，translateZ給 子元素 進行設置- translateZ(100px)：僅僅是在Z軸上移動，看不到變化；有了透視，就能看到translateZ 引起的變化
5.3D 旋轉 rotate3d()
- 左手準則：左手的手拇指指向 x 軸的正方向，其餘手指的彎曲方向就是該元素沿着 x 軸旋轉的方向
transform: rotateX(45deg)：沿着 x軸正方向旋轉 45 度transform: rotateY(45deg)：沿着 y軸正方向旋轉 45 度- 兩面翻轉盒子實例：
- 用大盒子 box 包裹住子盒子 front + back，給 body 設置透視
- 大盒子 box 在鼠標經過時會繞着 y軸旋轉180°
- 子盒子 back 本身需要旋轉180° 和 front 實現背靠背的效果
- 爲保證子盒子本身旋轉實現，要給父盒子添加 transform-style 屬性來保留子盒子立體空間
transform: rotate3d(x, y, z, deg)：沿着自定義軸旋轉， deg 爲角度- x, y, z 表示旋轉軸的矢量，表示是否沿着該軸進行旋轉，最後一個標識旋轉的角度
transform: rotate3d(1, 1, 0, 45deg)-- 沿着對角線旋轉 45degtransform: rotate3d(1, 0, 0, 45deg)-- 沿着 x 軸旋轉 45deg6.3D 呈現 transform-style（重要）
transform-style: preserve-3d子元素開啓立體空間，默認的值是 flat 不開啓- 代碼寫給 父級，但是影響的是 子盒子
<style> body { perspective: 500px; /* 透視效果 */ } .box { position: relative; ... transition: all 2s; /* 讓子元素保持3d立體空間環境 */ transform-style: preserve-3d; /* 若不設置 紫色盒子就無法繞着 x軸旋轉60° */ } .box:hover { transform: rotateY(60deg); /* 父親盒子繞着 y軸轉60° */} .box div { position: absolute; ... background-color: pink; } .box div:last-child { background-color: purple; /* 紫色盒子繞着x軸轉60° */ transform: rotateX(60deg); } </style> </head> <body> <div class="box"> <div></div> <div></div> </div> </body>7.3D 導航欄
- 用父盒子 ul-li 包裹住 子盒子box ，box 再包住 front 和 bottom
- 給 li 設置透視，box 設置 transf-style 來保持 front 和 bottom 的立體空間， 動畫效果（鼠標經過 box 沿着x軸轉9.°）
- front 盒子 設置 z-index: 1保持永遠在上，transform: translateZ(17.5px); 保證旋轉中心在屏幕裏面17.5px處
- bottom 盒子設置transform: translateY(17.5px) rotateX(-90deg); 保證頂部對齊front 且面朝下 先移動 再旋轉
ul li { /* 需要給box 旋轉 也需要透視 乾脆給li加 裏面的子盒子都有透視效果 */ perspective: 500px;} .box { position: relative; transform-style: preserve-3d; ... transition: all .4s; } .box:hover { transform: rotateX(90deg); } .front, .bottom { position: absolute; ...} .front { background-color: pink; z-index: 1; transform: translateZ(17.5px); } .bottom { background-color: purple; /* x軸一定是負值 */ /* 如果有移動 或者其他樣式，必須先寫我們的移動 */ transform: translateY(17.5px) rotateX(-90deg); } <ul> <li> <div class="box"> <div class="front">第五人格</div> <div class="bottom">茶茶子等你</div> </div> </li> ...8.3D 旋轉木馬
- 搭建HTML結構：
- <section>
- <div></div>...<div></div>
- </section>
- 裏面的6個div 分別是 6個狗狗圖片 ，注意最終旋轉是 section標籤 旋轉
- CSS樣式：
- ① 給body添加 透視效果 perspective: 1000px;
- ② 給section 添加 大小，一定不要忘記添加 3d呈現效果 控制裏面的6個div
- 注意：別忘記子絕父相，section要加相對定位
- ③ 裏面6個div 全部絕對定位疊到一起，然後旋轉不同角度 和 移動距離
- 注意：旋轉角度用rotateY 距離 用translateZ
- ④ 給section 添加動畫 animation ，讓它可以自動旋轉即可
- 源碼展示：
<style> body { perspective: 1000px;} section { position: relative; width: 300px; height: 200px; margin: 150px auto; transform-style: preserve-3d; /*保持子盒子div 3D立體空間*/ /* 添加動畫效果 */ animation: rotate 10s linear infinite; } section:hover { animation-play-state: paused; /* 鼠標放入section 停止動畫 */ } @keyframes rotate { 0% { transform: rotateY(0); } 100% { transform: rotateY(360deg); } } section div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(media/dog.jpg) no-repeat; } section div:nth-child(1) { /* 先旋轉好了再 移動距離 */ transform: rotateY(0) translateZ(300px); } section div:nth-child(2) { /* 先旋轉好了再 移動距離 */ transform: rotateY(60deg) translateZ(300px); } ... section div:nth-child(6) { /* 先旋轉好了再 移動距離 */ transform: rotateY(300deg) translateZ(300px); } </style> </head> <body> <section> <div></div> <!-- 6個div盒子 --> </section> </body>9.瀏覽器私有前綴
- 瀏覽器私有前綴是 兼容老版本 的寫法，比較新版本的瀏覽器無須添加
- -moz-：代表 firefox 瀏覽器私有屬性
- -ms-：代表 ie 瀏覽器私有屬性
- -webkit-：代表 safari、chrome 私有屬性
- -o-：代表 Opera 私有屬性
- 提倡寫法：
-moz-border-radius: 10px; -webkit-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px;
