css3基礎知識點 animation動畫

引數：

1、@keyframes 定義關鍵幀動畫

2、animation-name 動畫名稱

3、animation-duration 動畫時間

4、animation-timing-function 動畫曲線

linear 勻速

ease 開始和結束慢速
ease-in 開始是慢速
ease-out 結束時慢速
ease-in-out 開始和結束時慢速
steps 動畫步數

normal 預設動畫結束不返回

alternate 動畫結束後返回

paused 停止

running 運動

none 不改變預設行為

forwards 當動畫完成後，保持最後乙個屬性值（在最後乙個關鍵幀中定義）
backwards 在 animation-delay 所指定的一段時間內，在動畫顯示之前，應用開始屬性值（在第乙個關鍵幀中定義）
both 向前和向後填充模式都被應用

人物走路

<

!doctype html>
"en"
>
"utf-8"
>
animation 人物走路動畫<
/title>
"text/css"
>
.box
.box img
@keyframes walking
to}<
/style>
<
/head>
="box"
>
>
<
/div>
<
/body>
<
/html>

<

!doctype html>
"en"
>
"utf-8"
>
animation 動畫<
/title>
"text/css"
>
.box
@keyframes moving
to}<
/style>
<
/head>
="box"
>
<
/div>
<
/body>
<
/html>

CSS基礎知識點

1.css基礎 1.css選擇器 元素選擇器 p id選擇器 p1 類選擇器 pre 2.css注釋 注釋 3.css尺寸 width 寬度height 高度 4.css背景 background color 背景顏色 background image url imagepath 做背景 url b...

CSS3 知識點總結

1.border radius border radius設定的值越大，弧度越大，可以用具體數值10px來設定，也可以用20 百分比來設定 你也可以只設定乙個或其中幾個角的弧度，就像這樣 div 2.box shadow 用來設定乙個下拉陰影得框，語法如下 box shadow h shadow v...

CSS3常用知識點

1 css3選擇器 1.1 屬性選擇器 e attr val 表示的乙個單獨的屬性值 這個屬性值是以空格分隔的 attr2 a class kawa e attr val 表示的要麼乙個單獨的屬性值 要麼這個屬性值是以 分隔的 attr3 a class kawa e attr val 表示的屬性值...