H5C3新特性 動畫

轉換(transform)是css3中具有顛覆性的特徵之一，可以實現元素的位移、旋轉、變形、縮放。

縮放：scale

移動：translate

旋**rotate

傾斜：skew

2d轉換是改變標籤在二維平面上的位置和形狀的一種技術

transform

:translate
(x, y)
transform
:translatex
(n)transfrom
:translatey
(n)transfrom
:translatex
(n)translatey
(n)

給元素新增轉換屬性transform屬性值為rotate(角度)如transform:rotate(30deg)順時針方向旋轉30度

div

transform-origin

: x y;

用來控制元素的放大與縮小

transform

:scale
(x, y)

@keyframes 動畫名稱

100%
}

div

2.animation　所有動畫屬性的簡寫屬性，除了animation－play－state屬性

３.animation－name　規定@keyframes動畫的名稱．（必須的）

４.animation－duration　規定動畫完成乙個週期所花費的秒或毫秒，預設是０．

５.animation－timing－function　規定動畫的速度曲線，預設是"ease".

6.animation-delay 規定動畫何時開始，預設是０.

9.animation-play-state規定動畫是否正在執行或暫停，預設是「running」還有「paused」

10.animation-fill-mode 規定動畫結束後，保持forwards回到起始backwards

動畫簡寫方式

animation: name duration timing-function delay iteration-count direction fill-mode

animation-timing-function: 規定動畫的速度曲線，預設是ease

1.linear :動畫從頭到尾的速度是相同的，勻速

2.ease：預設，動畫以低速開始，然後加速，在結束前變慢。

3.ease-in 動畫以低速開始

4.ease-out 動畫以低速結束。

5.ease-in-out 動畫以低速開始和結束

6.steps（） 指定了

3d的特點

transform

:translate3d
(x, y, z)

body

perspecitve給父級進行設定，translatez給子元素進行設定不同的大小

3d 旋轉指可以讓元素在三維平面內沿著 x 軸、y 軸、z 軸 或者自定義軸進行旋轉

transform-style

H5C3關鍵點記錄

與 這些類似，h5把這些布局語義話，並沒有本質區別。定義了文件的頭部區域 定義頁面的側邊欄內容 定義頁面內容之外的內容 定義 section 或 document 的頁尾 在ie9一下並不支援html5的語法規則，需要通過引入html5shiv.min.js這個外掛程式相容ie9一下 1.datal...

H5C3小知識點總結

相對定位 reletive 絕對定位 absolute 注意 overflow hidden text overflow ellipsis white space nowrap display webkit box webkit box orient vertical webkit line cla...

H5C3知識點今日總結

結構 位置 偽類選擇器 css3 p first of type 匹配同型別中的第乙個同級兄弟元素p p last of type 匹配同型別中的最後乙個同級兄弟元素p p first child 匹配父元素的第乙個子元素p。p last child 匹配父元素的第乙個子元素p。p nth chil...