選擇符
簡介e[att]
選擇具有att屬性的e元素
e[att="val"]
選擇具有att屬性且屬性值為val的e元素
e[att^="val"]
匹配具有att屬性, 且值以val開頭的e元素
e[att$="val"]
匹配具有att屬性, 且值以val借位的e元素
e[att*="val"]
匹配具有att屬性, 且值中含有val的e元素
選擇符簡介
e:first-child
匹配父元素中的第乙個子元素e
e:last-child
匹配父元素中最後乙個e元素
e:nth-child(n)
匹配父元素中的第n個子元素e
e:first-of-type
指定型別e的第乙個
e:last-of-type
指定型別e的最後乙個
e:nth-of-type(n)
指定型別e的第n個
選擇符簡介
::before
在元素內部的前面插入內容
::after
在元素內部的後面插入內容
transform: translate(x, y)
transform: translatex(n)
transfrom: translatey(n)
例如:
divrotate 旋轉
rotate語法
/* 單位是：deg */
transform: rotate(度數)
/**/
div
重點知識點
**演示
img:hovertransform-origin基礎語法
transform-origin: x y;重要知識點
scale的作用
語法
transform: scale(x, y)知識要點
**演示
div:hover動畫的基本使用
語法格式(定義動畫)
@keyframes 動畫名稱
100%
}
語法格式(使用動畫)
div動畫序列
**演示
屬性描述
@keyframes
規定動畫
animation
所有動畫屬性的簡寫屬性, 除了animation-play-state屬性。
animation-name
規定@keyframes動畫的名稱
animation-duration
規定動畫完成乙個週期所花費的秒或毫秒, 預設是0
animation-timing-function
規定動畫的速度曲線
animation-delay
規定動畫何時開始, 預設是0.
animation-iteration-count
animation-direction
animation-play-state
規定動畫是否正在執行或暫停。預設"running"還有paused
animation-fill-mode
規定動畫結束後狀態, 保持forwards回到起始backwards
animation-timing-function: 規定動畫的速度曲線，預設是ease值描述
linear
動畫從頭到尾的速度是相同的。勻速
ease
預設。動畫從低俗開始,然後加快,在結束前變慢。
ease-in
動畫以低速開始。
ease-out
動畫以低速結束。
ease-in-out
動畫以低速開始和結束。
strps()
指定了時間函式中的間隔數量(步長)
transform: translate3d(x, y, z)
/*******************************/
transform: translate3d(100px, 100px, 100px)
/* 注意：x, y, z 對應的值不能省略，不需要填寫用 0 進行填充 */
transform: translate3d(100px, 100px, 0)
知識要點translatez與perspecitve的區別
3d 旋轉指可以讓元素在三維平面內沿著 x 軸、y 軸、z 軸 或者自定義軸進行旋轉
例如
div
img
img:hover
/*- 左手的手拇指指向 x 軸的正方向
- 其餘手指的彎曲方向就是該元素沿著 x 軸旋轉的方向
*/
3d旋轉rotatey
div
img
img:hover
/*- 左手的拇指指向 y 軸的正方向
- 其餘的手指彎曲方向就是該元素沿著 y 軸旋轉的方向(正值)
*/
3d旋轉rotatez
**演示
div
img
img:hover
rotate3d
transform-style
css3系列 概述
css3分成了不同類別，稱為 modules 而每乙個 modules 都有於css2中額外增加的功能，以及向後相容。css3早於1999年已經開始制訂。18 直到2011年6月7日，css 3 color module終於發布為w3c recommendation。19 css3裡增加了不少功能，...
好程式設計師web前端系列之css3動畫
好程式員web前端系列之動畫，css3屬性中有關於製作動畫的三個屬性 transform,transition,animation keyframes mymoveto 或 keyframes mymove 100 中間再可以新增關鍵幀 相同點 都是隨著時間改變元素的屬性值。不同點 transiti...
css3動畫系列之 keyframes規則
keyframes 規則用於建立動畫。在 keyframes 中規定某項 css 樣式，就能建立由當前樣式逐漸改為新樣式的動畫效果。css div 常見動畫規則case為背景色由紅色變為藍色 webkit keyframes caseto 將以上css 加入到頁面中就可以看到效果啦o o 注 key...