-
transition-duration屬性主要用來設(shè)置一個屬性過渡到另一個屬性所需的時間，也就是從舊屬性過渡到新屬性花費的時間長度，俗稱持續(xù)時間。
查看全部 -
早期在Web中要實現(xiàn)動畫效果，都是依賴于JavaScript或Flash來完成。但在CSS3中新增加了一個新的模塊transition，它可以通過一些簡單的CSS事件來觸發(fā)元素的外觀變化，讓效果顯得更加細膩。簡單點說，就是通過鼠標的單擊、獲得焦點，被點擊或?qū)υ厝魏胃淖冎杏|發(fā)，并平滑地以動畫效果改變CSS的屬性值。
在CSS中創(chuàng)建簡單的過渡效果可以從以下幾個步驟來實現(xiàn)： 第一，在默認樣式中聲明元素的初始狀態(tài)樣式； 第二，聲明過渡元素最終狀態(tài)樣式，比如懸浮狀態(tài)； 第三，在默認樣式中通過添加過渡函數(shù)，添加一些不同的樣式。
CSS3的過度transition屬性是一個復合屬性，主要包括以下幾個子屬性：
transition-property:指定過渡或動態(tài)模擬的CSS屬性
transition-duration:指定完成過渡所需的時間
transition-timing-function:指定過渡函數(shù)
transition-delay:指定開始出現(xiàn)的延遲時間
先來看transition-property屬性
transition-property用來指定過渡動畫的CSS屬性名稱，而這個過渡屬性只有具備一個中點值的屬性（需要產(chǎn)生動畫的屬性）才能具備過渡效果，其對應(yīng)具有過渡的CSS屬性主要有：
特別注意：當“transition-property”屬性設(shè)置為all時，表示的是所有中點值的屬性。
用一個簡單的例子來說明這個問題：
假設(shè)你的初始狀態(tài)設(shè)置了樣式“width”,“height”,“background”,當你在終始狀態(tài)都改變了這三個屬性，那么all代表的就是“width”、“height”和“background”。如果你的終始狀態(tài)只改變了“width”和“height”時，那么all代表的就是“width”和“height”。
查看全部 -
任何一個元素都有一個中心點，默認情況之下，其中心點是居于元素X軸和Y軸的50%處。如下圖所示：
在沒有重置transform-origin改變元素原點位置的情況下，CSS變形進行的旋轉(zhuǎn)、位移、縮放，扭曲等操作都是以元素自己中心位置進行變形。但很多時候，我們可以通過transform-origin來對元素進行原點位置改變，使元素原點不在元素的中心位置，以達到需要的原點位置。
transform-origin取值和元素設(shè)置背景中的background-position取值類似，如下表所示：
查看全部 -
matrix() 是一個含六個值的(a,b,c,d,e,f)變換矩陣，用來指定一個2D變換，相當于直接應(yīng)用一個[a b c d e f]變換矩陣。就是基于水平方向（X軸）和垂直方向（Y軸）重新定位元素,此屬性值使用涉及到數(shù)學中的矩陣，我在這里只是簡單的說一下CSS3中的transform有這么一個屬性值，如果需要深入了解，需要對數(shù)學矩陣有一定的知識。
示例演示：通過matrix()函數(shù)來模擬transform中translate()位移的效果。
-webkit-transform:?matrix(1,0,0,1,50,50); ??-moz-transform:matrix(1,0,0,1,50,50); ??transform:?matrix(1,0,0,1,50,50);
查看全部 -
translate()函數(shù)可以將元素向指定的方向移動，類似于position中的relative?；蛞院唵蔚睦斫鉃?，使用translate()函數(shù)，可以把元素從原來的位置移動，而不影響在X、Y軸上的任何Web組件。
查看全部 -
縮放 scale()函數(shù) 讓元素根據(jù)中心原點對對象進行縮放。
查看全部 -
扭曲skew()函數(shù)能夠讓元素傾斜顯示。它可以將一個對象以其中心位置圍繞著X軸和Y軸按照一定的角度傾斜。這與rotate()函數(shù)的旋轉(zhuǎn)不同，rotate()函數(shù)只是旋轉(zhuǎn)，而不會改變元素的形狀。skew()函數(shù)不會旋轉(zhuǎn)，而只會改變元素的形狀。
Skew()具有三種情況：
1、skew(x,y)使元素在水平和垂直方向同時扭曲（X軸和Y軸同時按一定的角度值進行扭曲變形）；
第一個參數(shù)對應(yīng)X軸，第二個參數(shù)對應(yīng)Y軸。如果第二個參數(shù)未提供，則值為0，也就是Y軸方向上無斜切。
2、skewX(x)僅使元素在水平方向扭曲變形（X軸扭曲變形）；
3、skewY(y)僅使元素在垂直方向扭曲變形（Y軸扭曲變形）
查看全部 -
旋轉(zhuǎn)rotate()函數(shù)通過指定的角度參數(shù)使元素相對原點進行旋轉(zhuǎn)。它主要在二維空間內(nèi)進行操作，設(shè)置一個角度值，用來指定旋轉(zhuǎn)的幅度。如果這個值為正值，元素相對原點中心順時針旋轉(zhuǎn)；如果這個值為負值，元素相對原點中心逆時針旋轉(zhuǎn)。
?transform:?rotate(45deg);
查看全部 -
在Web的表單中，有些表單元素有可用（“:enabled”）和不可用（“:disabled”）狀態(tài)，比如輸入框，密碼框，復選框等。在默認情況之下，這些表單元素都處在可用狀態(tài)。那么我們可以通過偽選擇器“:enabled”對這些表單元素設(shè)置樣式。
查看全部 -
表示一個元素他有很多個子元素，而其中只有一種類型的子元素是唯一的，使用“:only-of-type”選擇器就可以選中這個元素中的唯一一個類型子元素
查看全部 -
匹配的元素的父元素中僅有一個子元素，而且是一個唯一的子元素
查看全部 -
當某個元素中的子元素不單單是同一種類型的子元素時，使用“:nth-of-type(n)”選擇器來定位于父元素中某種類型的子元素是非常方便和有用的。
查看全部 -
當“:nth-child(n)”選擇器中的n為一個表達式時，其中n是從0開始計算，當表達式的值為0或小于0的時候，不選擇任何匹配的元素。如下表所示：
查看全部 -
:root選擇器，從字面上我們就可以很清楚的理解是根選擇器，他的意思就是匹配元素E所在文檔的根元素。在HTML文檔中，根元素始終是<html>。“:root”選擇器等同于<html>元素，簡單點說：
:root{background:orange}html {background:orange;}查看全部 -
屬性選擇器
查看全部
舉報