權重為10
input[value=]
input[type="val"]
div[att^="val"] //以val為開頭的
dic[att$="val"] //以val為結尾的
ul li:first-child
ul li:last-child
ul li:nth-child(n)
//所有的孩子
ul li:nth-child(2)
//第2個孩子
ul li:nth-child(even)
偶數ul li:nth-child(odd)
奇數ul li:nth-child()
2n|3n|5n 倍數
n+3 n+5 從第幾個（包含這個數）
-n+3 -n+5 前幾個
nth-of-type
(n) //指定元素進行排序，然後再進行查詢
權重為1
屬於行內元素
content為必須屬性
::before
::after
translate對於行內元素是無效的
transform
:translate
(x,y)
;transform
:translatex()
;transform
:translatey()
;實現乙個盒子水平垂直居中
top:50%;
left
:50%;
transform
:translate
(-50%,-50%)
rorate
(xdeg)
transform
:rotate
(45deg) 順時針旋轉45度
設定旋轉中心點
transform-origin
:x y; //預設是50% 50% 等價於center center
transform-origin
:left bottom; //可以是方位名詞
transform-origin
:x y; // 也可以是畫素
scale
(x,y)
transform
:scale
(x,y) //裡面寫的數字，不跟單位 x是寬度的倍數 y是高度的倍數
transform
:scale
(n) //乙個數字表示等比縮放的
也可以設定縮放中心點
2d轉換可以綜合寫法 transform
:translate()
rotate()
scale()
; //中間用空格
同時有位移和其他屬性時，位移放在最前面
### 1. 定義動畫@keyframes move
100%
}
動畫名稱
animation-name
:move;
持續時間 //完成乙個週期所需要的時間
animation-duration
:2s;
運動曲線
animation-timing-function
:linear 勻速||ease 預設||steps
() 步長;
何時開始
animation-delay
:1s;
重複次數
animation-iteration-count
:n||infinite; //無限重複
animation-direction
:normal||alternate; //預設||反方向
動畫結束後的狀態 預設的是backwords 停留在結束狀態forwords
animation-fill-mode
:backwords||forwords;
停止動畫
animation-play-state
:paused||running;
簡寫屬性 //前兩個屬性一定要寫
animation
可以呼叫多個動畫
animation
:第乙個動畫,第二個動畫;
透視寫在被觀察元素的父盒子上面
div
transform
:translate3d
(x,y,z)
; //x,y,z是不能省略的，如果沒有就寫零
transform
:rotatex()
rotatey()
rotatez
() //rotatez
() 類似與2d旋轉
transform
:rotate3d
(x,y,z,deg)
;transform
:rotate3d
(1,1,0,deg)
;
**寫在被觀察元素的父盒子上面
div
CSS3新增屬性用法整理CSS3新增屬性用法整理
css3新增屬性用法整理 css3新增屬性用法整理 1 box shadow 陰影效果 2 border color 為邊框設定多種顏色 3 border image 邊框 4 text shadow 文字陰影 5 text overflow 文字截斷 6 word wrap 自動換行 7 bord...
CSS3新增屬性（3）
1.定義動畫 用keyframes 定義動畫 類似定義類選擇器 keyframes 動畫名稱 100 動畫序列 0 是動畫的開始，100 是動畫的完成，這樣的規則就是動畫序列。在 keyframes 中規定某項css樣式，就能建立由當前樣式逐漸改為新樣式的動畫效果。動畫是使元素從一種樣式逐漸變化為另...
css3新動 css3新增動畫
1 transiition過渡 樣式改變就會執行transition 1 格式 transiition 1s width linear,2s 1s height 2 引數 transition property 要運動的樣式 all attr none transition duration 運動時...