css3新屬性
- 邊框：border-radius|box-shadow:10px 10px 5px #xxxxxx|border-image
- 背景：background-size|background-origin:content-box/padding-box/border-box|允許多個(gè)背景圖片：background-image：url(),url()|text-shadow|word-wrap：break-word允許文本換行
- 字體：@font-face自定義字體
- 偽類
- :empty 沒有子元素的element元素
- :enable 選擇每個(gè)已啟動(dòng)的元素
- :disable 選擇每個(gè)已禁止的元素
- :chacked 選擇每個(gè)被選中的元素
- :target 選擇當(dāng)前活動(dòng)的元素
- 2D负拟、3D轉(zhuǎn)換transform
- 過渡效果：transition
- 動(dòng)畫animation，結(jié)合@keyframes使用
box-shadow
box-shadow: 10px 10px 5px 5px #xxx insert
- h-shadow: 水平陰影位置
- v-shadow：垂直陰影位置，與水平位置一樣可為負(fù)，必選
- blur：模糊距離
- spread：陰影尺寸
- color：陰影顏色
- insert：內(nèi)部陰影
css3 漸變：線性/徑向漸變
- 線性漸變（(repeat-)linear-gradient）- 向下/向上/向左/向右/對(duì)角方向
background: linear-gradient(direction, color-stop1, color-stop2, ...);
direction: to bottom right / xdeg
color: color x% ：顏色中心所在的位置 - 徑向漸變（(repeat-)radial-gradient）- 由它們的中心定義
動(dòng)畫 transform、transition、animation、
- 2D轉(zhuǎn)換transform：
translat(x,y)|rotate(30deg)|scale(x,y)縮放|skew(30deg,20deg)水平垂直翻轉(zhuǎn)角度|matrix()2D方法組合- 3D轉(zhuǎn)換：
rotateX(120deg)|rotateY()|
- 3D轉(zhuǎn)換：
- 過渡效果：
transition-property:color background|transition-duration|transition-timing-function:sase/liner/ease-in/ease-out/ease-in-out/cubic-bezier（num,num,num,num）|transition-deley|
簡(jiǎn)寫：transition: property duration timing-function delay;
過渡的屬性注祖，完成過度效果需要時(shí)間，速度曲線均唉，延遲時(shí)間
.one1{transition: width 3s linear 2s;}
.one1:hover{width:300px;}
- animate動(dòng)畫：@keyframes規(guī)則：
animation-name|animation-duration|animation-timing-function|animation-delay|animation-iteration-count:inifinite/number|animation-direction:normal/alternate動(dòng)畫播放方向|animation-play-state:running/paused元素動(dòng)畫播放狀態(tài)
animation的使用必須結(jié)合@keyframes animation-name使用
animation: name duration timing-function delay iteration-count direction;
@-webkit-keyframes move {
form{ left:0px;}
to{ left:200px;}
}
區(qū)別：
- 觸發(fā)條件不同是晨。transition通常和hover等事件配合使用，由事件觸發(fā)舔箭。animation則立即播放罩缴。
- 循環(huán)蚊逢。 animation可以設(shè)定循環(huán)次數(shù)。
- 精確性箫章。 animation可以設(shè)定每一幀的樣式和時(shí)間烙荷。tranistion 只能設(shè)定頭尾。 animation中可以設(shè)置每一幀需要單獨(dú)變化的樣式屬性檬寂， transition中所有樣式屬性都要一起變化终抽。
- 與javascript的交互。animation與js的交互不是很緊密桶至。tranistion和js的結(jié)合更強(qiáng)大昼伴。js設(shè)定要變化的樣式，transition負(fù)責(zé)動(dòng)畫效果塞茅，天作之合亩码，比之前只能用js時(shí)爽太多季率。
- 貝塞爾曲線：cubic-bezier(n,n,n,n)自定義平滑曲線野瘦。貝塞爾曲線有4個(gè)點(diǎn)，左下為起始點(diǎn)P0坐標(biāo)固定為(0,0)飒泻，右上為終點(diǎn)P3坐標(biāo)固定為(1,1)鞭光，中間有兩點(diǎn)P1和P2的坐標(biāo)就是cubic-bezier(n,n,n,n)的參數(shù)。通過4條連起來的直線泞遗，生成平滑的曲線惰许。
linear是勻速過渡，ease是先快再慢的節(jié)奏史辙，ease-in是加速?zèng)_刺的節(jié)奏汹买，ease-out是減速到停止的節(jié)奏，ease-in-out是先加速后減速
