1、變形 - transform 迅速變化
2、過渡 - transition 緩慢變化
3、動畫 - animation 關鍵幀動畫
1、轉換原點
默認情況下，原點是在當前物體的中心點上
修改原點:
屬性:transform-origin
值:
1、x座標 y座標
當前物體的左上點爲 x:0 y:0
2、寬度百分比 高度百分比
0% 0% 左上點
50% 50% 中心點
3、關鍵字
top:上
bottom:下
left:左
right:右
center:中間
center center
left top
transform-origin:0; 表示 所有軸的位置都將歸到0點處
transform-origin:50px 50px; 表示 x軸在50像素處，y軸在50像素處
transform-origin:50px 50px 50px; 表示 x軸，y軸，z軸
2、變形:2d
旋轉:rotate()
位移:translate()
縮放:scale()
傾斜:skew()
旋轉:圍繞一個參照原點(transform-origin),旋轉指定角度，默認爲順時針
語法:transform:rotate(ndeg);
n爲正 則按順時針旋轉
n爲負 則按逆時針旋轉
注意:rotate在旋轉的過程中，不但能夠旋轉元素，同時能夠旋轉繪圖的座標系方向。如果配合着其他的變形一起來做的話，rotate在前的話，會影響之後延座標軸的其他變形。
解決方案:如果配合變形一起來做，最好將rotate放在最後一個函數上
位移:延 座標方向 移動指定的距離
語法:translate(x軸移動距離,y軸的移動距離);
x : 正爲右，負爲左
y : 正爲下，負爲上
transform:translate(50px,50px);
注意:位移不會影響其他元素位置,單可能會蓋住周圍元素
其他兩個單方向位移:
translateX(距離);
translateY(距離);
縮放:將指定座標軸上的座標縮放指定的倍數
語法:scale(倍數)
倍數 : 0-1 之間的小數,縮小
>1 放大
scale(倍數) 表示等比縮放
其他兩個單方向縮放:
scaleX(倍數);
scaleY(倍數);
transform:scale(2);
傾斜:沿着座標軸方向，傾斜指定角度
語法:skew(ndeg);僅沿x軸傾斜
skew(ndeg,ndeg);沿着x軸和y軸同時傾斜
單方向傾斜:
skewX(ndeg)
skewY(ndeg)
x軸方向:角度爲正，向左倒
角度爲負，向右倒
y軸方向:角度爲正向上傾斜
角度爲負向下傾斜
3、3d變形
元素,要從立體角度觀察
座標軸,x軸，y軸，z軸
屬性:
perspective
設定假定的人眼位置到投影平面的距離
如何使用：設置在父元素上的
瀏覽器兼容性:
Chrom,Safari : -webkit-perspective
Firefox : -moz-perspective
位移:
3D位移可以改變元素在z軸上的位置
translateZ(z);
translate3d(x,y,z);
旋轉:
transform:
rotateX(ndeg);
rotateY(ndeg);
rotateZ(ndeg);
縮放:
transform:
scaleZ(z);
scale3d(x,y,z);
==================================================
1、過渡
transition
1、什麼是過渡
CSS屬性在一段時間內進行平滑的過渡
2、過渡四要素
1、過渡屬性:background,color,transform
2、過渡所需時間:
3、過渡函數:速度和方式
4、過渡延遲時間:激發操作後的執行間隔(s|ms)
3、過渡屬性
1、過渡屬性
屬性名:transition-property
transition-property:background,color;
2、過渡時間:
屬性名:transition-duration:
以秒(s)或毫秒(ms)爲單位
transition-duration:5s;
3、過渡函數
屬性名:transition-timing-function
備選值:
ease:默認值，慢速開始，快速變快，慢速結束
linear:勻速過渡
ease-in:慢速開始，加速效果
ease-out:以慢速結束，減速效果
ease-in-out:以慢速開始和結束，中間先加速再減速
4、過渡延遲
屬性名:transition-delay
以秒或毫秒爲單位
5、整合transition屬性
transition:屬性名 持續時間 過渡函數 [延遲],
屬性名 持續時間 過渡函數 [延遲];
2、關鍵幀動畫
關鍵幀:動畫執行過程中，物體在某一位置上的特殊狀態
關鍵幀動畫:使用連續的關鍵幀，控制物體聯繫的狀態變化
什麼時候使用關鍵幀動畫:
1、連續，有規律的過渡 -- 過渡 transition
2、無規律的連續變化 -- 動畫 animation
如何實現:
2大步:
1、定義關鍵幀
@keyframes 動畫名{
from{
0%
css樣式
動畫開始的狀態
}
percent{
}
to{
100%
css樣式
動畫結束的狀態
}
}
@keyframes change{
from{
background:red;
}
10%
{
background:yellow;
}
50%
{
background:green;
}
to
{
background:pink;
}
}
瀏覽器兼容性:
@keyframes : IE , 火狐
@-webkit-keyframes : Chrome Safari
@-o-keyframes : Opera
2、觸發動畫(調用動畫)
屬性:animation
animation:動畫名 持續時間 速度類型;
如何:
1、寫在非僞類選擇器中，頁面加載則執行動畫
2、寫在僞類中，僞類觸發時則播放動畫
瀏覽器兼容性:
-webkit-animation: Chrome，Safari
-o-animation:Opera
3、動畫子屬性
1、animation-name : @keyframes(動畫)名稱
2、animation-duration : 動畫時長
3、animation-timing-function:動畫速度函數
4、animation-delay:動畫的延遲時間
animation:name duration timing-function;
5、animation-iteration-count : 播放次數
取值:
1、具體數值
2、infinite(無限次播放)
6、animation-direction : 動畫播放方向
取值:
1、normal 正常播放
2、alternate 輪流播放
奇數次數：正向播放
偶數次數：反向播放
animation:name duration timing-function delay iteration-count direction;
7、animation-fill-mode
動畫播放前後的效果
備選值:
1、none:不改變默認行爲
2、forwards:動畫完成後保證最後一個屬性狀態
3、backwards:動畫播放前，顯示開始屬性值
4、both
8、animation-play-state
控制動畫播放與暫停
備選值:
1、paused : 暫停動畫
2、running : 播放動畫
使用場合:
1、配合僞類選擇器
2、結合Javascript使用
@keyframes second{
from{
transform:rotate(0deg);
}
to{
transform:rotate(360deg);
}
}
調用
#second{
animation:second 60s linear 0s infinite;
}
CSS3高級內容集
1、僞類選擇器
回顧：什麼是僞類選擇器更改元素的不同的狀態的樣式
:hover :link :visited :active
1、目標僞類
1、什麼是目標僞類
突出顯示活動的HTML錨，用於選取當前活動的目標元素
2、語法
:target
p:target
2、元素狀態僞類
1、什麼是元素狀態僞類
主要匹配元素的禁用、啓用、選中狀態
多數應用在表單元素上
2、常用的狀態僞類
:disabled 匹配每個被禁用的元素
:enabled 匹配每個已啓用的元素
:checked 匹配每個被選中的元素(只用於單選按鈕和複選框)
3、結構僞類
1、什麼是結構僞類
主要從元素的結構(層級結構)上來進行劃分的
2、什麼時候使用結構僞類
找 第一個子元素、最後一個子元素、沒有子元素、僅僅只包含一個子元素 優先使用結構僞類
3、如何使用結構僞類
:first-child 匹配屬於其父元素的首個子元素
:last-child 匹配屬於其父元素的最後一個子元素
:empty 匹配沒有子元素(包含文本)的元素
<p>這是一個段落</p> 非empty
<div></div> empty
:only-child 匹配屬於其父元素的唯一子元素
<div>
<span></span>
<span></span>
</div>
<div>
<span></span>
</div>
4、否定僞類
匹配非指定元素/選擇器的每個元素
語法:
:not(selecotr)
eg:
1、獲取 input 但是 type不是text的所有元素
input[type=text]
input:not([type=text])
2、獲取除第一個div子元素意外的其他div子元素
div:first-child
div:not(div:first-child)
2、僞元素選擇器
主要針對元素中的文本內容進行匹配的。
1、:first-letter
選取指定選擇器的首字母
eg:
p:first-letter{
}
一般用於 排版、首字符突出等操作
2、:first-line
選取指定選擇器的首行
3、::selection
匹配用戶選取的部分
=================================================
1、內容生成
1、什麼是內容生成
通過css 向元素的前面或後面增加一部分內容
2、僞元素
:before 匹配到某一元素的最前面
p:before
:after 匹配到某一元素的最後面
p:after
3、內容生成
content : 配合 :before 或 :after僞元素，插入生成內容
content的常用取值:
1、字符串:純文本，插入到指定的位置處
p:before{
content:"至尊寶:";
}
2、url:生成的圖像
a:before{
content:url(Images/i1.jpg);
}
3、計數器
2、計數器
1、計數器的作用
向已存在的html文本內容增添序號
2、如何使用計數器
1、定義計數器
屬性:counter-reset
作用:定義一個計數器，並且設置初始值爲0
body{
counter-reset:計數器名稱 初始值 計數器名稱 初始值;
}
body{
counter-reset:count 10;
}
2、設置計數器增量
可以單獨設置某一選擇器使用計數器時的增量，默認值是1
屬性:counter-increment
div{
counter-increment:count 10;
}
3、使用計數器
通過 counter(計數器名稱) 來使用計數器
div:before{
content:"第"counter(count)"章";
}
3、多列
1、分隔列
把一段文本拆分成幾列
column-count:規定元素被分隔的列數
2、列間隔
設置列與列之間的距離
column-gap:間隔;
3、列規則
可以在列與列之間設置一條間隔線，列規則可以設置間隔線的樣式、顏色、粗細
column-rule:大小 樣式 顏色;
column-rule-width:
column-rule-style:
column-rule-color:
4、瀏覽器兼容
1、IE10 以及 Opera 瀏覽器支持多列屬性
2、FireFox 需使用前綴 -moz-
-moz-column-count:
-moz-column-gap:
-moz-column-rule:
3、Chrome 和 Safari
-webkit-column-count:
-webkit-column-gap:
-webkit-column-rule:
4、CSS Hack
1、爲什麼需要CSS Hack
瀏覽器兼容性所引發的問題
2、瀏覽器運行模式
1、混雜模式
2、標準模式(Standard Mode)
3、準標準模式(Almost Standard Mode)
3、瀏覽器主要通過 DOCTYPE 進行模式選擇
觸發混雜模式:不聲明DOCTYPE
觸發標準模式:
4、瀏覽器兼容問題
1、margin和padding
ie6中 默認的 maring 偏大
解決方案:body{margin:0px;}
2、居中佈局
ie6以及低版本瀏覽器:通過父元素的text-align:center;完成居中
高版本瀏覽器(ie6,ie7+,chrome,firefox,opera,safari):通過當前元素的margin實現即 margin:0 auto;
3、元素高度與內容
ie6 : 元素的高度至少包括內容
其他:元素高度會超出容器
解決方案:overflow屬性
4、子元素設置上外邊距時
ie6:正常顯示
其他版本:子元素的上外邊距會認爲是父元素的上外邊距
解決方案:
1、給父元素設置邊框
2、設置父元素的 padding-top
5、HTML頭部引用Hack
通過HTML條件註釋完成
<!--[if 條件]>
<![endif]-->
IE6:
<!--[if IE 6]>
編寫HTML
引入css
<![endif]-->
大於IE6的版本:
<!--[if gt IE 6]>
<![endif]-->