H5+CSS3 學習
阿新 • • 發佈：2020-08-28
1.屬性選擇器
2.css3結構偽類選擇器
n也可以是關鍵詞 even是偶數 odd是奇數
選擇div下面第一個span div後面加空格
<style type="text/css"> div span:nth-child(2){ background-color: pink; } </style> <body> <div> <p>我是一個p</p> <span3.偽元素選擇器 ::before 在元素內部的前面插入內容 ::after 在元素內部的後面插入內容 4. 2D轉換 轉換（transform）是css3中具有顛覆性的特徵之一，可以實現元素的位移，旋轉、縮放等效果 轉換（transform）可以簡單理解為變形 ·移動：translate ·旋轉：rotate ·縮放：scale ②重點>我是span</span> <span>我是span</span> <span>我是span</span> </div> </body>
4.2 2D轉換之旋轉rotate 2D旋轉指的是讓元素在2維平面內順時針旋轉或者逆時針旋轉。 ①語法 transform:rotate(度數) ②重點 ·rotate裡面跟度數，單位是deg比如 rotate(45deg) ·角度為正時，順時針，負時，為逆時針 ·預設旋轉的中心點是元素的中心點
<style type="text/css"> div{ position: relative; width: 249px; height: 35px; border: 1px solid pink; } div::after{ content: ''; position: absolute; width: 10px; height: 10px; top: 10px; right: 8px; border-bottom: 1px solid #000; border-right: 1px solid #000; transform: rotate(45deg); } div:hover::after{ transform: rotate(225deg); /*過渡寫到本身上,誰做動畫給誰加*/ transition: all .2s; } </style>
4.3 2D轉換中心點transform-origin
①語法 transform-origin:x y;②重點 · 注意後面的引數x和y用空格隔開 · xy預設轉換的中心點是元素的中心點(50% 50%) · 還可以給xy設定畫素或者方位名詞（top bottom left right center）
4.4 2D轉換之縮放scale ①語法 transform:scale(x,y); ②注意 ·注意其中的x和y用逗號分隔 ·sacle縮放最大的優勢：可以設定轉換中心點縮放，預設以中心點縮放的，而且不影響其他盒子
5.動畫（animation） 製作動畫分為兩步： ①先定義動畫 ②在使用（呼叫）動畫 5.1用keyframes定義動畫（類似定義類選擇器） 動畫序列 ·0%是動畫的開始，100%是動畫的完成。這樣的規則就是動畫序列。 ·在@keyframes中規定某項css樣式，就能建立由當前樣式逐漸改為新樣式的動畫效果。 ·請用百分比來規定變化發生的時間，或用關鍵詞“from”和“to”，等同於0%和100%
<style type="text/css"> /*定義動畫*/ @keyframes move{ from{ transform: translateX(0); } to{ transform: translateX(1000px); } } div{ width: 300px; height: 300px; background-color: pink; /*呼叫動畫名稱*/ animation-name: move; /*持續時間*/ animation-duration: 2s; animation: move 2s linear 0s infinite alternate forwards; } div:hover{ animation-play-state:paused; } </style>
案例 奔跑的小熊
<style type="text/css"> body{background-color: #ccc;} div{ position: absolute; width: 200px; height: 100px; background: url(img/bear.png)no-repeat; animation: run 1s steps(8) infinite,mov 4s forwards; } @keyframes run{ from{ background-position: 0 0; } to{ background-position: -1600px 0; } } @keyframes mov{ from{ left: 0; } to{ left: 50%; transform: translate(-50%); } } </style>View Code
案例 地圖標註
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body{background-color: #ccc;} .map{ background:url(img/map.png) no-repeat; width: 953px; height: 472px; margin: 0 auto; } .city{ position: absolute; top: 164px; left: 712px; } .dotted{ position: absolute; width: 8px; height: 8px; background-color: pink; border-radius: 50%; } .city div[class^='pusle']{ /*保證小波紋在父盒子裡水平垂直居中 放大之後就會中心向四周發散*/ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 8px; height: 8px; box-shadow: 0 0 12px hotpink; border-radius: 50%; animation: pusle 1.2s linear infinite forwards; } .city div.pusle2{ animation-delay: 0.4s; } .city div.pusle3{ animation: .8s; } @keyframes pusle{ 0%{ opacity: 1; } 70%{ width: 40px; height: 40px; opacity: 1; } 100%{ width: 70px; height: 70px; opacity: 0; } } </style> </head> <body> <div class="map"> <div class="city"> <div class="dotted"></div> <div class="pusle1"></div> <div class="pusle2"></div> <div class="pusle3"></div> </div> </div> </body> </html>View Code
6.3D轉換
3D轉換常用的3D位移和3D旋轉 ·3D位移:translate3d(x,y,z) ·3D旋轉:rotate3d(x,y,z) ·透視:perspective ·3D呈現:transfrom-style
6.2 3D移動 translate3d 3D移動在2D移動的基礎上多加了一個可以移動的方向，就是z軸方向。 ·transform:translateX(100px):僅僅在x軸上移動 ·transform:translateY(100px):僅僅在y軸上移動 ·transform:translateZ(100px):僅僅在z軸上移動(注意：translateZ一般用px單位) ·transform:translate3d(x,y,z):其中x、y、z分別指要移動的軸的方向的距離 6.6 3D呈現 transform-style · 控制子元素是否開啟三維立體環境。 ·transform-style:flat 子元素不開啟3D立體空間 預設的 ·transform-style:preserve-3d; 子元素開啟立體空間 · 程式碼寫給父級，但是影響的是子盒子 · 這個屬性很重要，後面必用
案例 旋轉的盒子
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body{ perspective: 500px; } .box{ position: relative; width: 300px; height: 300px; margin: 0 auto; transform-style: preserve-3d; transition: all .4s; } .box:hover{ transform: rotateY(180deg); } .front, .back{ position: absolute; top: 0; left: 0; width: 300px; height: 300px; text-align: center; line-height: 300px; color: #fff; border-radius: 50%; } .front{ background-color: pink; } .back{ background-color: plum; transform: rotateY(180deg); } </style> </head> <body> <div class="box"> <div class="front">粉色盒子</div> <div class="back">這裡紫色盒子</div> </div> </body> </html>View Code
案例 3D導航
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } ul li{ float: left; list-style: none; width: 100px; height: 35px; margin: 0 5px; perspective: 500px; text-align: center; line-height: 35px; color: #fff; cursor: pointer; } .box{ position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: all .3s; } .box:hover{ transform: rotateX(90deg); } .front, .bottom{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .front{ background-color: pink; transform: translateZ(17.5px); } .bottom{ background-color: purple; transform:translateY(17.5px) rotatex(-90deg); } </style> </head> <body> <ul> <li> <div class="box"> <div class="front">這裡是導航</div> <div class="bottom">Hello!</div> </div> </li> <li> <div class="box"> <div class="front">這裡是導航</div> <div class="bottom">Hello!</div> </div> </li> <li> <div class="box"> <div class="front">這裡是導航</div> <div class="bottom">Hello!</div> </div> </li> <li> <div class="box"> <div class="front">這裡是導航</div> <div class="bottom">Hello!</div> </div> </li> <li> <div class="box"> <div class="front">這裡是導航</div> <div class="bottom">Hello!</div> </div> </li> </ul> </body> </html>View Code
案例 旋轉木馬
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body{ perspective: 1000px; } section{ margin: 100px auto; position: relative; width: 300px; height: 200px; animation: rotate 10s linear infinite; transform-style: preserve-3d; } section:hover{ animation-play-state: paused; } @keyframes rotate{ 0%{ transform: rotateY(0); } 100%{ transform: rotateY(360deg); } } section div{ position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: url(img/han.JPG) no-repeat; } section div:nth-child(1){ transform: translateZ(300px); } section div:nth-child(2){ transform:rotateY(60deg) translateZ(300px); } section div:nth-child(3){ transform:rotateY(120deg) translateZ(300px); } section div:nth-child(4){ transform: rotateY(180deg) translateZ(300px); } section div:nth-child(5){ transform:rotateY(240deg) translateZ(300px) ; } section div:nth-child(6){ transform: rotateY(300deg) translateZ(300px); } </style> </head> <body> <section> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </section> </body> </html>View Code 7.瀏覽器私有字首 瀏覽器私有字首是為了相容老版本的寫法，比較新版本的瀏覽器無須新增。 背景漸變色