-
CSS3中的變形--位移 translate()
translate()函數可以將元素向指定的方向移動，類似于position中的relative?；蛞院唵蔚睦斫鉃椋褂胻ranslate()函數，可以把元素從原來的位置移動，而不影響在X、Y軸上的任何Web組件。
translate我們分為三種情況：
1、translate(x,y)水平方向和垂直方向同時移動（也就是X軸和Y軸同時移動）
2、translateX(x)僅水平方向移動（X軸移動）
3、translateY(Y)僅垂直方向移動（Y軸移動）
實例演示：通過translate()函數將元素向Y軸下方移動50px,X軸右方移動100px。
CSS3中的變形--矩陣 matrix()
matrix()?是一個含六個值的(a,b,c,d,e,f)變換矩陣，用來指定一個2D變換，相當于直接應用一個[a b c d e f]變換矩陣。就是基于水平方向（X軸）和垂直方向（Y軸）重新定位元素,此屬性值使用涉及到數學中的矩陣，我在這里只是簡單的說一下CSS3中的transform有這么一個屬性值，如果需要深入了解，需要對數學矩陣有一定的知識。
示例演示：通過matrix()函數來模擬transform中translate()位移的效果。
HTML代碼：<div class="wrapper"> ? <div></div> </div>
CSS代碼：
.wrapper { ? width: 300px; ? height: 200px; ? border: 2px dotted red; ? margin: 40px auto; } .wrapper div { ? width:300px; ? height: 200px; ? background: orange; ??-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); }
演示結果：
查看全部 -
CSS3變形--旋轉 rotate()
旋轉rotate()函數通過指定的角度參數使元素相對原點進行旋轉。它主要在二維空間內進行操作，設置一個角度值，用來指定旋轉的幅度。如果這個值為正值，元素相對原點中心順時針旋轉；如果這個值為負值，元素相對原點中心逆時針旋轉。
扭曲skew()函數能夠讓元素傾斜顯示。它可以將一個對象以其中心位置圍繞著X軸和Y軸按照一定的角度傾斜。這與rotate()函數的旋轉不同，rotate()函數只是旋轉，而不會改變元素的形狀。skew()函數不會旋轉，而只會改變元素的形狀。
Skew()具有三種情況：
1、skew(x,y)使元素在水平和垂直方向同時扭曲（X軸和Y軸同時按一定的角度值進行扭曲變形）；
第一個參數對應X軸，第二個參數對應Y軸。如果第二個參數未提供，則值為0，也就是Y軸方向上無斜切。
2、skewX(x)僅使元素在水平方向扭曲變形（X軸扭曲變形）；
3、skewY(y)僅使元素在垂直方向扭曲變形（Y軸扭曲變形）
CSS3中的變形--縮放 scale()
縮放 scale()函數?讓元素根據中心原點對對象進行縮放。
縮放 scale 具有三種情況：
1、?scale(X,Y)使元素水平方向和垂直方向同時縮放（也就是X軸和Y軸同時縮放）
例如：
div:hover { ? -webkit-transform: scale(1.5,0.5); ? -moz-transform:scale(1.5,0.5) ? transform: scale(1.5,0.5); }
注意：Y是一個可選參數，如果沒有設置Y值，則表示X，Y兩個方向的縮放倍數是一樣的。
2、scaleX(x)元素僅水平方向縮放（X軸縮放）
3、scaleY(y)元素僅垂直方向縮放（Y軸縮放）
TML代碼：
<div class="wrapper">
?<div>我將放大1.5倍</div>
</div>CSS代碼：
.wrapper {
?width: 200px;
?height: 200px;
?border:2px dashed red;
?margin: 100px auto;
}
.wrapper div {
?width: 200px;
?height: 200px;
?line-height: 200px;
?background: orange;
?text-align: center;
?color: #fff;
}
.wrapper div:hover {
?opacity: .5; ?-webkit-transform: scale(1.5);
? -moz-transform:scale(1.5)
?transform: scale(1.5);}演示結果
注意：?scale()的取值默認的值為1，當值設置為0.01到0.99之間的任何值，作用使一個元素縮?。欢魏未笥诨虻扔?.01的值，作用是讓元素放大。
查看全部 -
:before和::after這兩個主要用來給元素的前面或后面插入內容，這兩個常和"content"配合使用，使用的場景最多的就是清除浮動。
.clearfix::before,
.clearfix::after {
? ?content: ".";
? ?display: block;
? ?height: 0;
? ?visibility: hidden;
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;}
當然可以利用他們制作出其他更好的效果，比如右側中的陰影效果，也是通過這個來實現的。關鍵代碼分析：
.effect::before, .effect::after{
??? content:"";?? ?position:absolute;
?? ?z-index:-1;
?? ?-webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
?? ?-moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
?? ?box-shadow:0 0 20px rgba(0,0,0,0.8);
?? ?top:50%;
?? ?bottom:0;
?? ?left:10px;
?? ?right:10px;
?? ?-moz-border-radius:100px / 10px;
?? ?border-radius:100px / 10px;
}上面代碼作用在class名叫.effect上的div的前（before）后(after)都添加一個空元素，然后為這兩個空元素添加陰影特效。
查看全部 -
CSS3動畫（注意：Chrome或Safari瀏覽器，需要加入-webkit-前綴！）
關鍵幀
使用@keyframes命令定義關鍵幀，具體格式為：
@keyframes name{
selsector{css-styles;}}
name表示動畫名稱；
selector表示關鍵幀的時間位置，也就是動畫時長的百分比，也可以使用參數from（等價于0%）to（等價于100%）表示動畫的
開始和結束；
css-styles表示對應關鍵幀的樣式屬性，可以設置多個屬性;
動畫效果相關屬性
1.animation-name:name|none;動畫名稱
設置要應用的動畫名稱
2.animation-duration:time;動畫時間
設置動畫效果播放一次的時長
3.animation-timing-function設置動畫的速度曲線
屬性值cubiczier(n,n,n,n)|liner|ease|ease-in|ease-out
4.animation-delay:time;設置延遲時間
5.animation-iteration-count:number|infinite設置動畫播放次數
其中，number表示動畫播放次數，屬性值為正整數，默認值為1；infinite表示循環(huán)播放
6.animation-direction屬性用來設置動畫播放方向
屬性值：normal是默認值，表示動畫的每次循環(huán)都是向前播放
alternate表示動畫播放在第偶數次向前播放，第奇數次向反方向播放
7.animation-play-state屬性設置元素動畫的播放狀態(tài)
值：running是默認值，將暫停的動畫重新播放
paused表示將播放的動畫停下來
例：
span{
animation-name:move;
animation-play-state:paused;
}
span:hover{
animation-pay-state:running;
}
此屬性值可以配合:hover等偽類選擇器使用，鼠標指針離開該元素時動畫暫停播放，反之動畫繼續(xù)播放
8.animation-fill-mode屬性定義在動畫開始之前和結束之后發(fā)生的操作。
屬性值：none，forwards，backwards，both。
none默認值，表示動畫將按預期進行和結束，在動畫完成其最后一幀時，動畫會反轉到初始幀處。
forwards表示動畫在結束后繼續(xù)應用最后的關鍵幀的位置
backwards會在向元素應用動畫樣式時迅速應用動畫的初始幀
both元素動畫同時具有forwards和backwards效果
查看全部 -
CSS3中的動畫——過渡屬性
早期在Web中要實現動畫效果，都是依賴于JavaScript或Flash來完成。但在CSS3中新增加了一個新的模塊transition，它可以通過
一些簡單的CSS事件來觸發(fā)元素的外觀變化，讓效果顯得更加細膩。簡單點說，就是通過鼠標的單擊、獲得焦點，被點擊或對元素任
何改變中觸發(fā)，并平滑地以動畫效果改變CSS的屬性值
transition是一個復合屬性，主要包括以下幾個子屬性：
1.transition-property:指定過渡或動態(tài)模擬的CSS屬性[none|all|property]
none是默認值，表示不應用過渡效果；all表示為所有屬性應用過渡效果；property表示應用過渡效果的屬性名稱，可以設置多個。
2.transition-duration:指定完成過渡所需的時間
3.transition-timing-function:指定過渡的速度曲線【cubiczier(n,n,n,n)|liner|ease|ease-in|ease-out】
cubiczier(n,n,n,n)貝塞爾曲線，用于精確設置過渡效果的速度曲線，n的取值為0~1；
linear勻速顯示過渡效果，等同于cubiczier(0,0,1,1);
ease默認值，（相對于勻速）慢速開始、先加速再減速至結束的過渡效果，等同于cubiczier(0.25,0.1,0.25,0.1)
ease-in（相對于勻速）慢速開始再逐漸加速的過渡效果，等同于cubiczier(0.42,0,1,1)
ease-out（相對于勻速）快速開始慢速結束的過渡效果，等同于cubiczier(0,0,0.58,1)
ease-in-out（相對于勻速）慢速開始慢速結束的過渡效果，等同于cubiczier(0.42,0,0.58,1)
4.transition-delay:指定開始出現的延遲時間
查看全部 -
CSS3選擇器 ::selection選擇器
“::selection”偽元素是用來匹配突出顯示的文本(用鼠標選擇文本時的文本)。瀏覽器默認情況下，用鼠標選擇網頁文本是以“深藍的背景，白色的字體”顯示的，效果如下圖所示：
從上圖中可以看出，用鼠標選中“專注IT、互聯網技術”、“純干貨、學以致用”、“沒錯、這是免費的”這三行文本中，默認顯示樣式為：藍色背景、白色文本。
有的時候設計要求,不使用上圖那種瀏覽器默認的突出文本效果，需要一個與眾不同的效果，此時“::selection”偽元素就非常的實用。不過在Firefox瀏覽器還需要添加前綴。
查看全部 -
CSS3選擇器 :enabled選擇器
在Web的表單中，有些表單元素有可用（“:enabled”）和不可用（“:disabled”）狀態(tài)，比如輸入框，密碼框，復選框等。在默認情況之下，這些表單元素都處在可用狀態(tài)。那么我們可以通過偽選擇器“:enabled”對這些表單元素設置樣式。
示例演示
通過“:enabled”選擇器，修改文本輸入框的邊框為2像素的紅色邊框，并設置它的背景為灰色。
CSS3選擇器 :disabled選擇器
“:disabled”選擇器剛好與“:enabled”選擇器相反，用來選擇不可用表單元素。要正常使用“:disabled”選擇器，需要在表單元素的HTML中設置“disabled”屬性。
示例演示
通過“:disabled”選擇器，給不可用輸入框設置明顯的樣式。
CSS3選擇器 :checked選擇器
在表單元素中，單選按鈕和復選按鈕都具有選中和未選中狀態(tài)。（大家都知道，要覆寫這兩個按鈕默認樣式比較困難）。在CSS3中，我們可以通過狀態(tài)選擇器“:checked”配合其他標簽實現自定義樣式。而“:checked”表示的是選中狀態(tài)。
示例演示：
通過“:checked”狀態(tài)來自定義復選框效果。
查看全部 -
CSS3 first-of-type選擇器
“:first-of-type”選擇器類似于“:first-child”選擇器，不同之處就是指定了元素的類型,其主要用來定位一個父元素下的某個類型的第一個子元素。
示例演示：
通過“:first-of-type”選擇器，定位div容器中的第一個p元素（p不一定是容器中的第一個子元素），并設置其背景色為橙色
CSS3 結構性偽類選擇器—first-child
“:first-child”選擇器表示的是選擇父元素的第一個子元素的元素E。簡單點理解就是選擇元素中的第一個子元素，記住是子元素，而不是后代元素。
示例演示
通過“:first-child”選擇器定位列表中的第一個列表項，并將序列號顏色變?yōu)榧t色
“:only-of-type”選擇器用來選擇一個元素是它的父元素的唯一一個相同類型的子元素。這樣說或許不太好理解，換一種說法。“:only-of-type”是表示一個元素他有很多個子元素，而其中只有一種類型的子元素是唯一的，使用“:only-of-type”選擇器就可以選中這個元素中的唯一一個類型子元素。
示例演示
通過“:only-of-type”選擇器來修改容器中僅有一個div元素的背景色為橙色。
查看全部 -
:nth-child(n)”選擇器用來定位某個父元素的一個或多個特定的子元素。其中“n”是其參數，而且可以是整數值(1,2,3,4)，也可以是表達式(2n+1、-n+5)和關鍵詞(odd、even)，但參數n的起始值始終是1，而不是0。也就是說，參數n的值為0時，選擇器將選擇不到任何匹配的元素。
經驗與技巧:當“:nth-child(n)”選擇器中的n為一個表達式時，其中n是從0開始計算，當表達式的值為0或小于0的時候，不選擇任何匹配的元素。如下表所示：
CSS3 nth-of-type(n)選擇器
“:nth-of-type(n)”選擇器和“:nth-child(n)”選擇器非常類似，不同的是它只計算父元素中指定的某種類型的子元素。當某個元素中的子元素不單單是同一種類型的子元素時，使用“:nth-of-type(n)”選擇器來定位于父元素中某種類型的子元素是非常方便和有用的。在“:nth-of-type(n)”選擇器中的“n”和“:nth-child(n)”選擇器中的“n”參數也一樣，可以是具體的整數，也可以是表達式，還可以是關鍵詞。
示例演示
通過“:nth-of-type(2n)”選擇器，將容器“div.wrapper”中偶數段數的背景設置為橙色。
CSS3 nth-last-of-type(n)選擇器
“:nth-last-of-type(n)”選擇器和“:nth-of-type(n)”選擇器是一樣的，選擇父元素中指定的某種子元素類型，但它的起始方向是從最后一個子元素開始，而且它的使用方法類似于上節(jié)中介紹的“:nth-last-child(n)”選擇器一樣。
示例演示
通過“:nth-last-of-type(n)”選擇器將容器“div.wrapper”中的倒數第三個段落背景設置為橙色。
CSS3 last-of-type選擇器
“:last-of-type”選擇器和“:first-of-type”選擇器功能是一樣的，不同的是他選擇是父元素下的某個類型的最后一個子元素。
示例演示
通過“:last-of-type”選擇器，將容器“div.wrapper”中最后一個段落元素背景設置為橙色
（提示：這個段落不是“div.wrapper”容器的最后一個子元素）。
查看全部 -
SS3 結構性偽類選擇器—empty
:empty選擇器表示的就是空。用來選擇沒有任何內容的元素，這里沒有內容指的是一點內容都沒有，哪怕是一個空格。
示例顯示：
比如說，你的文檔中有三個段落p元素，你想把沒有任何內容的P元素隱藏起來。我們就可以使用“:empty”選擇器來控制。
HTML代碼：
<p>我是一個段落</p> <p> </p> <p></p>
CSS代碼：
p{ ?background: orange; ?min-height: 30px; } p:empty { ? display: none; }
演示結果：
CSS3 結構性偽類選擇器—last-child
“:last-child”選擇器與“:first-child”選擇器作用類似，不同的是“:last-child”選擇器選擇的是元素的最后一個子元素。例如，需要改變的是列表中的最后一個“l(fā)i”的背景色，就可以使用這個選擇器，
ul>li:last-child{background:blue;}
CSS3 結構性偽類選擇器—nth-last-child(n)
“:nth-last-child(n)”選擇器和前面的“:nth-child(n)”選擇器非常的相似，只是這里多了一個“l(fā)ast”，所起的作用和“:nth-child(n)”選擇器有所區(qū)別，從某父元素的最后一個子元素開始計算，來選擇特定的元素。
查看全部 -
CSS3 結構性偽類選擇器—root
:root選擇器，從字面上我們就可以很清楚的理解是根選擇器，他的意思就是匹配元素E所在文檔的根元素。在HTML文檔中，根元素始終是<html>。
示例演示：
通過“:root”選擇器設置背景顏色
HTML代碼：
<div>:root選擇器的演示</div>
CSS代碼：
:root { ? background:orange; }
“:root”選擇器等同于<html>元素，簡單點說：
:root{background:orange}
html {background:orange;}
得到的效果等同。
建議使用:root方法。
另外在IE９以下還可以借助“:root”實現hack功能。
CSS3 結構性偽類選擇器—first-child
“:first-child”選擇器表示的是選擇父元素的第一個子元素的元素E。簡單點理解就是選擇元素中的第一個子元素，記住是子元素，而不是后代元素。
示例演示
通過“:first-child”選擇器定位列表中的第一個列表項，并將序列號顏色變?yōu)榧t色。
查看全部 -
CSS3背景 multiple backgrounds
多重背景，也就是CSS2里background的屬性外加origin、clip和size組成的新background的多次疊加，縮寫時為用逗號隔開的每組值；用分解寫法時，如果有多個背景圖片，而其他屬性只有一個（例如background-repeat只有一個），表明所有背景圖片應用該屬性值。
語法縮寫如下：
background ： [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],...
可以把上面的縮寫拆解成以下形式：
background-image:url1,url2,...,urlN;
background-repeat : repeat1,repeat2,...,repeatN;
backround-position : position1,position2,...,positionN;
background-size : size1,size2,...,sizeN;
background-attachment : attachment1,attachment2,...,attachmentN;
background-clip : clip1,clip2,...,clipN;
background-origin : origin1,origin2,...,originN;
background-color : color;注意：
用逗號隔開每組 background 的縮寫值；
如果有 size 值，需要緊跟 position 并且用 "/" 隔開；
如果有多個背景圖片，而其他屬性只有一個（例如 background-repeat 只有一個），表明所有背景圖片應用該屬性值。
background-color?只能設置一個。
舉例：
查看全部 -
CSS3背景 background-size
設置背景圖片的大小，以長度值或百分比顯示，還可以通過cover和contain來對圖片進行伸縮。
語法：
background-size: auto | <長度值> | <百分比> | cover | contain
取值說明：
1、auto：默認值，不改變背景圖片的原始高度和寬度；
2、<長度值>：成對出現如200px 50px，將背景圖片寬高依次設置為前面兩個值，當設置一個值時，將其作為圖片寬度值來等比縮放；
3、<百分比>：0％~100％之間的任何值，將背景圖片寬高依次設置為所在元素寬高乘以前面百分比得出的數值，當設置一個值時同上；
4、cover：顧名思義為覆蓋，即將背景圖片等比縮放以填滿整個容器；
5、contain：容納，即將背景圖片等比縮放至某一邊緊貼容器邊緣為止。
提示：大家可以在右邊的編輯窗口輸入自己的代碼嘗試不同取值的效果。
CSS生成內容
在Web中插入內容，在CSS2.1時代依靠的是JavaScript來實現。但進入CSS3進代之后我們可以通過CSS3的偽類“:before”，“:after”和CSS3的偽元素“::before”、“::after”來實現，其關鍵是依靠CSS3中的“content”屬性來實現。不過這個屬性對于img和input元素不起作用。
content配合CSS的偽類或者偽元素，一般可以做以下四件事情：
功能
? ?
功能說明
? ?
none
? ?
不生成任何內容
? ?
attr
? ?
插入標簽屬性值
? ?
url
? ?
使用指定的絕對或相對地址插入一個外部資源（圖像，聲頻，視頻或瀏覽器支持的其他任何資源）
? ?
string
? ?
插入字符串
? ?
查看全部 -
CSS3背景 background-clip
用來將背景圖片做適當的裁剪以適應實際需要。
語法：
background-clip ： border-box | padding-box | content-box | no-clip;
參數分別表示從邊框、或內填充，或者內容區(qū)域向外裁剪背景。no-clip表示不裁切，和參數border-box顯示同樣的效果。backgroud-clip默認值為border-box。
CSS3外輪廓屬性
外輪廓outline在頁面中呈現的效果和邊框border呈現的效果極其相似，但和元素邊框border完全不同，外輪廓線不占用網頁布局空間，不一定是矩形，外輪廓是屬于一種動態(tài)樣式，只有元素獲取到焦點或者被激活時呈現。
outline屬性早在CSS2中就出現了，主要是用來在元素周圍繪制一條輪廓線，可以起到突出元素的作用。但是并未得到各主流瀏覽器的廣泛支持，在CSS3中對outline作了一定的擴展，在以前的基礎上增加新特性。outline屬性的基本語法如下：
outline: ［outline-color］ || [outline-style] || [outline-width] || [outline-offset] || inherit
從語法中可以看出outline和border邊框屬性的使用方法極其類似。outline-color相當于border-color、outline-style相當于border-style，而outline-width相當于border-width，只不過CSS3給outline屬性增加了一個outline-offset屬性，其取值說明如下。
?
屬性值
? ?
屬性值說明
? ?
outline-color
? ?
定義輪廓線的顏色，屬性值為CSS中定義的顏色值。在實際應用中，可以將此參數省略，省略時此參數的默認值為黑色。
? ?
outline-style
? ?
定義輪廓線的樣式，屬性為CSS中定義線的樣式。在實際應用中，可以將此參數省略，省略時此參數的默認值為none，省略后不對該輪廓線進行任何繪制。
? ?
outline-width
? ?
定義輪廓線的寬度，屬性值可以為一個寬度值。在實際應用中，可以將此參數省略，省略時此參數的默認值為medium，表示繪制中等寬度的輪廓線。
? ?
outline-offset
? ?
定義輪廓邊框的偏移位置的數值，此值可以取負數值。當此參數的值為正數值，表示輪廓邊框向外偏離多少個像素；當此參數的值為負數值，表示輪廓邊框向內偏移多少個像素。
? ?
inherit
? ?
元素繼承父元素的outline效果。
? ?
查看全部 -
設置元素背景圖片的原始起始位置。
語法：
background-origin:border-box|padding-box|content-box;
參數分別表示背景圖片是從邊框，還是內邊距（默認值），或者是內容區(qū)域開始顯示。
需要注意的是，如果背景不是no-repeat，這個屬性無效，它會從邊框開始顯示。
任務
查看全部
舉報