1. 瀏覽器字首
css3去相容不同的瀏覽器，針對舊的瀏覽器做相容，新瀏覽器基本不需要新增字首。transition-property : 規定設定過渡效果的css屬性的名稱。
transition-duration : 規定完成過渡效果需要多少秒或毫秒。
transition-delay : 定義過渡效果何時開始。 ( 延遲(數值為正數)，也可以提前(數值為負數) )
transition-timing-function : 規定速度效果的速度曲線。
注：不要加到hover上。
translate : 位移
translatex
translatey
translatez ( 3d )
scale : 縮放 （值是乙個比例值，正常大小就是1，會已當前元素中心點進行縮放）
scalex
scaley
scalez (3d)
rotate : 旋轉 （ 旋轉的值，單位是角度 deg ）
rotatex (3d)
rotatey (3d)
rotatez ( 和rotate是等級關係，那正值按順時針旋轉，負值按逆時針旋轉 )
skew : 斜切
skewx : 單位也是角度，正值向左傾斜，負值向右傾斜。
skewy
transform的注意事項：
1. 變形操作不會影響到其他元素。
2. 變形操作只能新增給塊元素，但是不能新增給內聯元素。
3. 復合寫法，可以同時新增多個變形操作。
執行是有順序的，先執行後面的操作，再執行前面的操作。
translate會受到 rotate、scale、skew的影響
4. transform-origin : 基點的位置
x y z(3d)
animation-name : 設定動畫的名字 (自定義的)
animation-duration : 動畫的持續時間
animation-delay : 動畫的延遲時間
animation-iteration-count : 動畫的重複次數 ，預設值就是1 ，infinite無限次數
animation-timing-function : 動畫的運動形式
注： 1. 運動結束後，預設情況下會停留在起始位置。
2. @keyframes : from -> 0% , to -> 100%
none (預設值) : 在運動結束之後回到初始位置，在延遲的情況下，讓0%在延遲後生效
backwards : 在延遲的情況下，讓0%在延遲前生效
forwards : 在運動結束的之後，停到結束位置
both : backwards和forwards同時生效
alternate : 一次正向(0%~100%)，一次反向(100%~0%)
reverse : 永遠都是反向 , 從100%~0%
normal (預設值) : 永遠都是正向 , 從0%~100%
一款強大的預設css3動畫庫。
基本使用：
animated : 基類(基礎的樣式，每個動畫效果都需要加)
infinite : 動畫的無限次數
transform:
rotatex() : 正值向上翻轉
rotatey() : 正值向右翻轉
translatez() : 正值向前，負值向後
scalez() : 立體元素的厚度
3d寫法
scale3d() : 三個值 x y z
translate3d() : 三個值 x y z
rotate3d() : 四個值 0|1(x軸是否新增旋轉角度) 0|1(y軸是否新增旋轉角度) 0|1(z軸是否新增旋轉角度) deg
perspective（景深）: 離螢幕多遠的距離去觀察元素，值越大幅度越小。
perspective-origin : 景深-基點位置，觀察元素的角度。
transform-origin: center center -50px; （z軸只能寫數值，不能寫單詞）
transform-style : 3d空間
flat (預設值2d)、preserve-3d (3d，產生乙個三維空間)
backface-visibility : 背面隱藏
hidden、visible (預設值)
background-size : 背景圖的尺寸大小
cover : 覆蓋
contain : 包含
background-origin : 背景圖的填充位置
padding-box (預設)
border-box
content-box
background-clip : 背景圖的裁切方式
padding-box
border-box (預設)
content-box
注：復合樣式的時候，第乙個是位置，第二個是裁切
1. 線性漸變 -> linear-gradient是值，需要新增到background-image屬性上
注：漸變的0度是在頁面在下邊，正值會按照順時針旋轉，負值按逆時針旋轉。
2. 徑向漸變 -> radial-gradient
font-face是css3中的乙個模組，他主要是把自己定義的web字型嵌入到你的網頁中。
好處：1.可以非常方便的改變大小和顏色
font-size color
2.放大後不會失真
3.減少請求次數和提高載入速度
4.簡化網頁布局
5.減少設計師和前端工程師的工作量
6.可使用計算機沒有提供的字型
使用： @font-face語法
像.woff等檔案都是做相容平台處理的, mac、linux等。
HTML CSS基礎知識
二 cs與bs 面試題 三 html使用 四 css 1.概述 html hypertext markup language 超文字標記語言。2.作用 編寫網頁內容的 3.常見標籤 1.table 2.img 3.超連結a 4.表單form 文字框 type text 密碼框 type passwo...
HTML CSS基礎知識
5大瀏覽器 4大核心 ie trident firefox gecko google chrome webkit blink safari webkit opera presto 在html中body 預設margin 8px。float float會產生浮動流 所有產生了浮動流的元素，塊級元素看不...
html CSS基礎知識回顧
html部分 address，blockquote，center，dir,div,dl,dt,dd,fieldset,form,h1 h6,hr,isindex,menu,noframes,noscript,ol,p,pre,table,ul.a,abbr,acronym,b,bdo,big,br,...