久久亚洲精精品,在线丝袜人妻av,992大香蕉

CSS3簡介

CSS3的現(xiàn)狀

瀏覽器支持程度差，需要添加<a href="#abc">私有前綴</a>；
移動端支持優(yōu)于PC端；
不斷改進(jìn)中；
應(yīng)用相對廣泛，-webkit-border-radius(radius 半徑)。

要遵循漸進(jìn)原則。

準(zhǔn)備工作

環(huán)境準(zhǔn)備

由于CSS3兼容性問題的普遍存在，為了避免因兼容性帶來的干擾，我們約定統(tǒng)一的環(huán)境，以保證學(xué)習(xí)的效率，在最后會單獨(dú)說明兼容性的問題。
Chrome瀏覽器 version 46+
Firefox瀏覽器 firefox 42+

如何使用手冊

程序開發(fā)是一個(gè)不斷學(xué)習(xí)的過程，學(xué)會使用工具，可以讓我們事半功倍。
[]：表示全部可選項(xiàng) padding
||：1個(gè)或者更多；
|：多選一；
?：表示0個(gè)或者1個(gè)；
*：表示0個(gè)或者多個(gè)；
{}：表示范圍。
注：學(xué)習(xí)過程中一定要學(xué)會查看手冊，培養(yǎng)自主學(xué)習(xí)能力。

基礎(chǔ)知識

選擇器

CSS3新增了許多靈活查找元素的方法，極大的提高了查找元素的效率和精準(zhǔn)度。CSS3選擇器與jQuery中所提供的絕大部分選擇器兼容。
之前學(xué)過的選擇器：
- div{}：標(biāo)簽選擇器；
- .box{}：類選擇器；
- #box：id選擇器；
- div p：后代選擇器；
- div.box：交集選擇器；
- div,p,span：并集選擇器；
- div>p：子代選擇器；
- *：通配符；
- div+p：選擇div后面的第一個(gè)兄弟p（p必須要緊跟在div之后）；
- div~p：選中div后面所有的兄弟p。

屬性選擇器:`[]`

其特點(diǎn)是通過屬性來選擇元素，具體有以下5種形式：
E[attr]，表示存在attr屬性即可：div[title]：表示頁面中帶有title屬性的div；
E[attr=val]表示屬性值完全等于val：div[class=mydemo]；
E[attr*=val]表示的屬性值里包含val字符并且在“任意”位置：div[class*=mydemo];
E[attr^=val]表示的屬性值里包含val字符并且在“開始”位置：div[class^=mydemo]；
E[attr $=val]表示的屬性值里包含val字符并且在“結(jié)束”位置：`div[class$ =demos]`；
案例：配合jQuery 的過濾選擇器

偽類選擇器

除了以前學(xué)過的:link、:visited、:hover、:active、:focus，CSS3又新增了其它的偽類選擇器。
以某元素相對于其父元素或兄弟元素的位置來獲取元素的結(jié)構(gòu)偽類。
重點(diǎn)理解通過E來確定元素的父元素；
所選到的元素的類型，必須是指定的類型E，否則無效。
E:first-child：第一個(gè)子元素；
E:last-child：最后一個(gè)子元素；
E:nth-child(n)：第n個(gè)子元素，編號從1開始，計(jì)算方法是元素E的全部兄弟元素；

//第三個(gè)元素
div>ul>li:nth-child(3){
        color: deeppink;
}

E:nth-last-child(n)同E:nth-child(n) 相似，只是倒著計(jì)算；

div>ul>li:last-child(2){
        color: deeppink;
}

- n遵循`線性變化`，其取值0、1、2、3、4、... 但是當(dāng)n<=0時(shí)，選取無效。
- 選中所有的奇數(shù)的li：`括號中的表達(dá)式形式必須是n在前`

li:nth-child(2n-1){
        color: red;
}

- 選中所有的7的倍數(shù)的li：

li:nth-child(7n){
        color: red;
}

- 選中前面五個(gè)：

li:nth-child(-1n+5){
        color: red;
}

選中后面五個(gè)：

li:nth-last-child(-1n+5){
        color: red;
}

所有的偶數(shù)

li:nth-child(even){
        color:red
}

所有的奇數(shù)

li:nth-child(odd){
        color:blue;
}

- n可是多種形式：nth-child(2n)、nth-child(2n+1)、nth-child(-1n+5)等；
- 案例：日歷圖。

E:empty：選中沒有任何子節(jié)點(diǎn)的E元素（使用不是非常廣泛），沒有任何的子元素，包括空格，即元素為空的狀態(tài)。
目標(biāo)偽類：E:target結(jié)合錨點(diǎn)進(jìn)行使用，處于當(dāng)前錨點(diǎn)的元素被選中，表示元素被激活的狀態(tài)；

<li><a href="#title1">CSS (層疊樣式表)</a></li>
<h2 id="title1">CSS (層疊樣式表)</h2>
h2:target{
    color:red;
}

點(diǎn)擊章節(jié)進(jìn)行相應(yīng)跳轉(zhuǎn)變色。

偽元素選擇器

偽元素：
重點(diǎn)：E::before、E::after，是一個(gè)行內(nèi)元素，需要轉(zhuǎn)換成塊元素；
E:after、E:before在舊版本里是偽類，在新版本里是偽元素，新版本下E:after、E:before會被自動識別為E::after、E::before，按偽元素來對待，這樣做的目的是用來做兼容處理，必須要有content，否則無法顯示。E:after、E:before后面的練習(xí)中會反復(fù)用到，目前只需要有個(gè)大致了解。

.box::before{
    content:"今天";
}
.box::after{
    content:"真好";
}

偽元素選擇器：
E::first-letter文本的第一個(gè)字母或字（如中文、日文、韓文等）；
案例：首字下沉
E::first-line，文本第一行；
E::selection，選中的文本，可以根據(jù)這個(gè)效果去更改選中區(qū)域的樣式（可以更改背景顏色和文字顏色，但是不能改變字體大?。?；
":"與"::"區(qū)別在于區(qū)分偽類和偽元素
關(guān)于before和after：
CSS2中，E:before或者E:after，是屬于偽類的，并且沒有偽元素的概念；
CSS3中，提出偽元素的概念 E::before和E::after，并且歸屬到了偽元素當(dāng)中，偽類里就不再存在E:before或者E:after偽類。

顏色

一種新的顏色的表示方式：rgba(255,0,0,0.1)，RGBA是代表Red（紅色）、Green（綠色）、Blue（藍(lán)色）和Alpha的色彩空間。雖然它有的時(shí)候被描述為一個(gè)顏色空間。
新增了RGBA、HSLA模式，其中的A 表示透明度通道，即可以設(shè)置顏色值的透明度，相較opacity，它們不具有繼承性，即不會影響子元素的透明度。
Red、Green、Blue、Alpha即RGBA；
R、G、B 取值范圍0~255。
Hue、Saturation、Lightness、Alpha即HSLA；
H：色調(diào)，取值范圍0~360，0/360表示紅色、120表示綠色、240表示藍(lán)色；
S：飽和度，取值范圍0%~100%；
L：亮度，取值范圍0%~100%；
A：透明度，取值范圍0~1。
關(guān)于透明度：
opacity，只能針對整個(gè)盒子設(shè)置透明度，子盒子及內(nèi)容會繼承父盒子的透明度（此時(shí)不能再設(shè)置子盒子的透明度）；
transparent，可以單獨(dú)設(shè)置透明度，但是不可調(diào)節(jié)透明度，始終完全透明；
RGBA、HSLA可應(yīng)用于所有使用顏色的地方。
案例：
opacity，設(shè)置透明度，只能針對整個(gè)盒子設(shè)置透明度，子盒子會繼承父盒子的透明度。

.out{
        width: 200px;
        height: 200px;
        background: green;
        border: 1px solid darkgreen;
        margin: 40px auto;
        opacity: 0.3;
}

子盒子也出現(xiàn)透明

.out .inner{
        width: 100px;
        height: 100px;
        background-color: yellow;
}

background-color: transparent，完全透明，不可調(diào)節(jié)透明度.
使用rgba來控制顏色，相對opacity ，不具有繼承性。

文本 (shadow陰影)

text-shadow，可分別設(shè)置偏移量、模糊度、顏色（可設(shè)透明度）。

水平偏移量，正值向右，負(fù)值向左；
垂直偏移量，正值向下，負(fù)值向上；
模糊度不能為負(fù)值，值越大越模糊；
顏色，設(shè)置對陰影的顏色，可以有多個(gè)影子。
代碼演示：

// 3px，水平偏移量。正值向右  負(fù)值向左
//5px，垂直偏移量，正值向下 負(fù)值向上
//5px，模糊度，模糊度不能為負(fù)值，值越大越模糊
//#ccc，設(shè)置對象陰影的顏色?？梢杂卸鄠€(gè)影子.
ul>li{
    margin: 20px;
    font-size: 24px;
}
ul>li:nth-child(1){
    text-shadow: 5px 5px 2px #ccc;
}
ul>li:nth-child(2){
     text-shadow: -5px  -5px 2px #ccc;
}
ul>li:nth-child(3){
    text-shadow: 5px 5px 2px #ccc, -5px  -5px 2px #ccc;
}

案例：浮雕文字.

/*設(shè)置背景色.*/
body {
    background-color: gray;
    font: bold 6em "microsoft yahei";
}
div {
    margin: 30px;
    color: #808080;
    text-align: center;
}
/*設(shè)置水平向左1px 向上1 px   向右1px 向下1px */
.to{
    text-shadow: -1px -1px 1px #000,1px 1px 1px #fff;
}
.ao{
    text-shadow: -1px -1px 1px #000,1px 1px 1px #fff;
}

盒模型

CSS3中可以通過box-sizing來指定盒模型，即可指定為content-box、border-box，這樣我們計(jì)算盒子大小的方式就發(fā)生了改變。
box-sizing有兩個(gè)值:content-box、border-box?？梢苑殖蓛煞N情況：
content-box:外加模式，對象的實(shí)際寬度等于設(shè)置的width值和border、padding之和；
border-box：內(nèi)減模式，對象的實(shí)際寬度就等于設(shè)置的width值，即使定義有border和padding也不會改變對象的實(shí)際寬度，即 ( Element width = width )，我們把這種方式叫做盒模型。
默認(rèn)是外加模式。
兼容性比較好。
練習(xí)：圖片展示（內(nèi)減模式）

<span id="abc">瀏覽器私有化前綴：</span>

谷歌、Safari瀏覽器內(nèi)核：-webkit-；
火狐瀏覽器內(nèi)核：-moz-；
IE瀏覽器內(nèi)核：-ms-；
歐鵬瀏覽器內(nèi)核：-o-；

.box{
    width:200px;
    height:200px;
    border:1px solid #000;
    /*background:linear-gradient(left,red,blue);*/
    /*以上屬性，一般的瀏覽器都不支持，加上對應(yīng)的前綴即可被相應(yīng)的瀏覽器識別，如下*/
    background:-webkit-linear-gradient(left,red,blue);
    background:-moz-linear-gradient(left,red,blue);
    background:-ms-linear-gradient(left,red,blue);
    background:-o-linear-gradient(left,red,blue);
}

邊框

邊框圓角、邊框陰影屬性，應(yīng)用十分廣泛，兼容性也相對較好，具有符合漸進(jìn)增強(qiáng)原則的特征，需要重點(diǎn)掌握。

邊框圓角

border-top-radius：每個(gè)角可以設(shè)置兩個(gè)值，第一個(gè)值x值是水平方向上的值，第二個(gè)y值是垂直方向上的值；
border-radius:可以有一個(gè)值、兩個(gè)值、三個(gè)值、四個(gè)值，還可以用“/”分割橫坐標(biāo)和縱坐標(biāo)的值；賦值順序，從左上順時(shí)針進(jìn)行賦值，如果沒有值就取對角的值；
邊框圓角處理、正方形、扇形；
橢圓，圓角處理時(shí)，腦中要形成圓、圓心、橫軸、縱軸的概念，正圓是橢圓的一種特殊情況。
以“/”進(jìn)行分隔，可分別設(shè)置長、短半徑，遵循順時(shí)針規(guī)則，左上角為1，“/”前面的1~4個(gè)用來設(shè)置橫軸半徑（分別對應(yīng)橫軸1、2、3、4位置），“/”后面1~4個(gè)參數(shù)用來設(shè)置縱軸半徑（分別對應(yīng)縱軸1、2、3、4位置）

border-radius:40px 50px 20px 40px / 10px 10px 10px 10px;

邊框陰影

box-shadow與text-shadow用法差不多.

水平偏移量，正值向右，負(fù)值向左；
垂直偏移量，正值向下，負(fù)值向上；

.box{
        box-shadow: 5px 5px 5px 27px red, -5px -5px 5px -5px green;
}

模糊度是不能為負(fù)值；
陰影大小；
陰影顏色；
inset可以設(shè)置內(nèi)陰影；

.box{
    box-shadow:inset 5px 5px 5px 5px red,inset -5px -5px 5px -5px green;
}

7 注：設(shè)置邊框陰影不會改變盒子的大小，即不會影響其兄弟元素的布局。
可以設(shè)置多重邊框陰影，實(shí)現(xiàn)更好的效果，增強(qiáng)立體感。

邊框圖片（了解）

border-image：設(shè)置邊框的背景圖片；

border-image: url("images/border.png") 27/20px round

盒子的總寬高不會改變；

border-image-source:url("")：設(shè)置邊框圖片的地址；
border-image-slice:27,27,27,27：裁剪圖片，如何去裁切圖片，瀏覽器會自動去裁剪圖片；
border-image-width:20px;：指定邊框的寬度；
邊框平鋪的樣式：border-image-repeat: stretch;
stretch，拉升；
round：平鋪，會自動調(diào)整縮放比例（如果谷歌版本很高可能會出現(xiàn)問題）；
repeat(重復(fù))：正常平鋪，但是可能會顯示不完整。

設(shè)置的圖片將會被“切割”成九宮格形式，然后進(jìn)行設(shè)置：

“切割”完成后生成虛擬的9塊圖形，然后按對應(yīng)位置設(shè)置背景，
其中四個(gè)角位置、形狀保持不變，中心位置水平垂直兩個(gè)方向平鋪;

round和repeat之間的區(qū)別:
round會自動調(diào)整尺寸，完整顯示邊框圖片。
repeat單純平鋪多余部分，會被“裁切”而不能完整顯示。
更改裁切尺寸:

background-slice: 34 36 27 27

關(guān)于邊框圖片重點(diǎn)理解9宮格的裁切及平鋪方式，實(shí)際開發(fā)中應(yīng)用不廣泛，但是如能靈活運(yùn)用會給我們帶來不少便利。

案例：用css 實(shí)現(xiàn)

漸變

漸變是CSS3當(dāng)中比較豐富多彩的一個(gè)特性，通過漸變我們可以實(shí)現(xiàn)許多炫麗的效果，有效的減少圖片的使用數(shù)量，并且具有很強(qiáng)的適應(yīng)性和可擴(kuò)展性。
可分為線性漸變、徑向漸變

線性漸變（gradient 變化，屬于背景圖片里）

linear-gradient線性漸變指沿著某條直線朝一個(gè)方向產(chǎn)生漸變效果。
例如從黃色水平漸變到綠色：

background-image:linear-gradient(
    to right, 表示方向 (left,top,right,left ,也可以使用度數(shù))
    Yellow,  漸變起始顏色
    Green   漸變終止顏色
)

background:linear-gradient(
      to right,
      red 0%, red 25% ,
      blue 25%,blue 50%,
      green 50%,green 75%,
      pink 75% ,pink 100%
);  //前一個(gè)是起始顏色，后一個(gè)是終止顏色，百分比為占總長度的百分比

.box6{
    width: 600px;
    height: 150px;
    background: linear-gradient(135deg,#000 0%, #000 10%, #fff 10%, #fff 20%,#000 20%, #000 30%, #fff 30%, #fff 40%,#000 40%, #000 50%, #fff 50%, #fff 60%,#000 60%, #000 70%, #fff 70%, #fff 80%,#000 80%, #000 90%, #fff 90%, #fff 100%);
    animation: gun 5s linear infinite;
    background-size: 100px 150px;
}
@keyframes gun {
    from{

    }
    to{
        background-position: 100px 0px;
    }
}

必要的元素：

a、方向
b、起始顏色
c、終止色；
方向：垂直向上為0度，順時(shí)針逐漸增大。

徑向漸變 (radial 徑向)

radial-gradient：徑向漸變指從一個(gè)中心點(diǎn)開始，沿著四周產(chǎn)生漸變效果：

background: radial-gradient(
    150px  at  center,
    yellow,
    green
);

圍繞中心點(diǎn)做漸變，半徑是150px，從黃顏色到綠顏色做漸變。
必要的元素：
a、中心點(diǎn)，即圓的中心(中心點(diǎn)的位置是以盒子自身)

background: radial-gradient(
        150px  at left center,
        yellow,
        green
);

以左上角為圓的中心點(diǎn)

background: radial-gradient(
        150px  at 0px  0px,
        yellow,
        green
);

b、漸變起始色
c、漸變終止色
關(guān)于中心點(diǎn)：中心位置參照的是盒子的左上角；
關(guān)于輻射范圍：其半徑可以不等，即可以是橢圓；

div{
     width: 300px;
     height: 300px;
     margin:100px auto;
     background: radial-gradient(
         250px  at 0px 0px,
         yellow,
         green
     );
     border-radius: 150px;
}

背景

背景在CSS3中也得到很大程度的增強(qiáng)，比如背景圖片尺寸、背景裁切區(qū)域、背景定位參照點(diǎn)、多重背景等。
background-size:width,height,可以設(shè)置背景圖片的寬度以及高度。

background-size設(shè)置背景圖片的尺寸

background-size:600px auto;：自動是適應(yīng)盒子的寬度；
background-size:100% 100%;：通過百分比設(shè)置背景圖片大小；
通過具體數(shù)值來調(diào)整背景的尺寸：background-size: 100px 100px;。
cover：會自動調(diào)整縮放比例，保證圖片始終填充滿背景區(qū)域，如有溢出部分則會被隱藏，圖片有可能不完整顯示。
contain：會自動調(diào)整縮放比例，保證圖片始終完整顯示在背景區(qū)域；但是不保證鋪滿盒子，也可以使用長度單位或百分比。
案例:全屏背景自動適應(yīng)。

background-origin(原點(diǎn)，起點(diǎn))設(shè)置背景定位的原點(diǎn)

所謂的背景原點(diǎn)就是調(diào)整背景位置的一個(gè)參照點(diǎn)，調(diào)整背景圖片定位的參照原點(diǎn)。
border-box以邊框做為參考原點(diǎn)；
padding-box以內(nèi)邊距做為參考原點(diǎn)(默認(rèn)值)；
content-box以內(nèi)容區(qū)做為參考點(diǎn)。

background-clip設(shè)置背景區(qū)域clip(裁切)

border-box裁切邊框以內(nèi)為背景區(qū)域，邊框外邊緣；
padding-box裁切內(nèi)邊距以內(nèi)為背景區(qū)域；
content-box裁切內(nèi)容區(qū)做為背景區(qū)域；

以逗號分隔可以設(shè)置多背景，可用于自適應(yīng)局

背景圖片尺寸在實(shí)際開發(fā)中應(yīng)用十分廣泛。

案例：

相框；

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相框</title>

    <style>
        .album{
            width: 623px;
            height: 417px;
            border: 1px solid #000;
            background:
                url("images/bg1.png") no-repeat,
                url("images/bg2.png") no-repeat right top,
                url("images/bg3.png") no-repeat right bottom,
                url("images/bg4.png") no-repeat bottom left,
                url("images/bg5.png") no-repeat center;
            font: 700 60px/400px "Microsoft Yahei";
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="album">永垂不朽</div>
</body>
</html>

手機(jī)界面。
如果有背景顏色，必須加載最后一個(gè)url后面。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相框</title>

    <style>
        .phone{
            width: 639px;
            height: 800px;
            border: 1px solid #000;
            margin: 20px auto;
            background: url("images/head.jpg") no-repeat top,url("images/foot.jpg") no-repeat bottom,rgb(45,0,130);
        }
    </style>
</head>
<body>
        <div class="phone"></div>
</body>
</html>

過渡(transition)`重點(diǎn)`

Transition:param1 param2
param1：要過渡的屬性；
param2：過渡的時(shí)間。
過渡是CSS3中具有顛覆性的特征之一，可以實(shí)現(xiàn)元素不同狀態(tài)間的平滑過渡（補(bǔ)間動畫），經(jīng)常用來制作動畫效果；
補(bǔ)間動畫：自動完成從起始狀態(tài)到終止?fàn)顟B(tài)的的過渡。不用管中間的狀態(tài)；
幀動畫：撲克牌切換.通過一幀一幀的畫面按照固定順序和速度播放。如電影膠片
關(guān)于補(bǔ)間動畫更多學(xué)習(xí)可查看http://mux.alimama.com/posts/1009
特點(diǎn)：當(dāng)前元素只要有“屬性”發(fā)生變化時(shí)，可以平滑的進(jìn)行過渡。

相關(guān)屬性：
transition-property設(shè)置過渡屬性；，默認(rèn)值為all；
transition-duration設(shè)置過渡時(shí)間，
transition-timing-function設(shè)置過渡的動畫類型，linear(勻速)、ease-in (由慢到快)、ease（平滑過渡，默認(rèn)值）；
transition-delay設(shè)置過渡延時(shí)，過了多長時(shí)間后執(zhí)行動畫。

案例：

氣泡

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>氣泡</title>

    <style>
        .paopao{
            width: 350px;
            height: 150px;
            border: 1px solid #000;
            margin: 20px auto;

            background: url("images/paopao.png") no-repeat top left,url("images/paopao.png") no-repeat right bottom;
            background-color: #000;

            transition: 3s linear;
        }

        .paopao:hover{
            background-position: bottom left,right top;
        }
    </style>
</head>
<body>
    <div class="paopao"></div>
</body>
</html>

商品列表

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>邊框陰影</title>

    <style>
        body{
            background-color: #ddd;
        }
        .items{
            margin: 30px auto;
            width: 1250px;
            height: 300px;
        }

        .item{
            float: left;
            width: 230px;
            height: 300px;
            margin-right: 20px;
            text-align: center;
            background-color: #fff;
            position: relative;
            overflow: hidden;

            transition: 0.5s linear;
        }
        .pic{
            margin-top: 30px;
        }
        .desc{
            height: 60px;
            width: 100%;
            background-color: #f90;
            bottom: -60px;
            position: absolute;
            transition: 0.5s linear;
        }

        .item:hover{
            box-shadow: 0 0 18px #999;
            top: -5px;
        }
        .item:hover .desc{
            bottom: 0;
        }
    </style>
</head>
<body>
    <div class="items">
        <div class="item">
            ![](images/1.jpg)
        </div>
        <div class="item">
            ![](images/2.jpg)
            <div class="desc"></div>
        </div>
        <div class="item">
            ![](images/3.jpg)
            <div class="desc"></div>
        </div>
        <div class="item">
            ![](images/4.jpg)
            <div class="desc"></div>
        </div>
        <div class="item">
            ![](images/5.jpg)
            <div class="desc"></div>
        </div>
    </div>
</body>
</html>

手風(fēng)琴效果

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>手風(fēng)琴</title>

    <style>
        .accordion{
            margin: 60px auto;
            width: 400px;

        }
        .sec{
            border-bottom: 1px solid #00f;
            background-color: #993;
            transition: 0.5s linear;
        }
        .title{
            height: 30px;
            line-height: 30px;
            margin-left: 20px;
        }
        .con{
            height: 0;
            background-color: transparent;
            transition: 0.5s linear;
        }
        .sec:last-child{
            border-bottom: none;
        }

        .sec:hover{
            background-color: #9f3;
        }
        .sec:hover .con{
            height: 200px;
            background-color: pink;
        }

    </style>
</head>
<body>
    <div class="accordion">
        <div class="sec">
            <div class="title">新聞標(biāo)題</div>
            <div class="con"></div>
        </div>
        <div class="sec">
            <div class="title">新聞標(biāo)題</div>
            <div class="con"></div>
        </div>
        <div class="sec">
            <div class="title">新聞標(biāo)題</div>
            <div class="con"></div>
        </div>
        <div class="sec">
            <div class="title">新聞標(biāo)題</div>
            <div class="con"></div>
        </div>
    </div>
</body>
</html>

2D轉(zhuǎn)換`重點(diǎn)`

轉(zhuǎn)換是CSS3中具有顛覆性的特征之一，可以實(shí)現(xiàn)元素的位移、旋轉(zhuǎn)、變形、縮放，甚至支持矩陣方式，配合剛學(xué)習(xí)的過渡和動畫知識，可以取代大量之前只能靠Flash才可以實(shí)現(xiàn)的效果。在css3 當(dāng)中，通過transform(變形) 來實(shí)現(xiàn)2d 或者3d 轉(zhuǎn)換,其中2d 有：縮放、移動、旋轉(zhuǎn)。
移動translate(x,y)可以改變元素的位置，x、y可為負(fù)值，移動位置相對于自身原來位置；
x，在水平方向移動；
y，在垂直方向移動；
如果只有一個(gè)參數(shù)，默認(rèn)為水平方向;
除了可以是像素值，也可以是百分比，相對于自身的寬度或高度。
縮放scale(x,y)可以對元素進(jìn)行水平和垂直方向的縮放，x、y的取值可為小數(shù)，不可為負(fù)值，大于1時(shí)為放大，小于1時(shí)為縮小。
旋轉(zhuǎn)rotate(45deg)，可以對元素進(jìn)行旋轉(zhuǎn)，正值為順時(shí)針，負(fù)值為逆時(shí)針。
當(dāng)元素旋轉(zhuǎn)以后，坐標(biāo)軸也跟著發(fā)生轉(zhuǎn)變；
調(diào)整順序可以解決，把旋轉(zhuǎn)放到最后。
傾斜：skew(deg,deg)可以使元素按一定的角度進(jìn)行傾斜，可為負(fù)值，第二個(gè)參數(shù)不寫默認(rèn)為0；
第一個(gè)值為水平方向上傾斜的角度；
第二個(gè)值為垂直方向上傾斜的角度
矩陣：matrix()把所有的2D轉(zhuǎn)換組合到一起，需要6個(gè)參數(shù)（了解）。
transform-origin：可以調(diào)整元素轉(zhuǎn)換的原點(diǎn)。
我們可以同時(shí)使用多個(gè)轉(zhuǎn)換，其格式為：transform: translate() rotate() scale(); ...等，其順序會影響轉(zhuǎn)換的效果。

案例

盒子水平居中對齊；

.box{
    //距父盒子左側(cè)距離為父盒子寬度一半
    margin-left:50%;
    //往左側(cè)移動自身寬度的一般
    transform:translate(-50%);
}

火箭移動;

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小火箭</title>

    <style>
        html,body{
            width: 100%;
            height: 100%;
        }
        body{
            background-color: rgb(229,175,97);
        }

        img{
            position: absolute;
            left: 100px;
            bottom: 0;
            width: 80px;
            border: 1px solid #000;
            transform: translate(0px,150px) rotate(45deg);
            transition: all 1s;
        }
        body:hover img{
            transform: translate(600px,-300px) rotate(90deg);
        }
    </style>
</head>
<body>
    ![](images/rocket.png)
</body>
</html>

盾牌，將位置還原

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盾牌</title>

    <style>
        body{
            background-color: #000;
        }
        .shield{
            margin:60px auto;
            width: 420px;
        }

        img{
            transition: 0.3s;
        }
        img:nth-child(1){
            transform: translate(-184px,-52px) rotate(45deg);
        }
        img:nth-child(2){
            transform: translate(0px,-50px) rotate(0deg);
        }
        img:nth-child(3){
            transform: translate(52px,30px) rotate(45deg);
        }
        img:nth-child(4){
            transform: translate(-52px,30px) rotate(-45deg);
        }
        img:nth-child(6){
            transform: translate(152px,30px) rotate(45deg);
        }
        img:nth-child(7){
            transform: translate(-72px,30px) rotate(45deg);
        }
        img:nth-child(8){
            transform: translate(0px,50px) rotate(0deg);
        }
        img:nth-child(9){
            transform: translate(40px,50px) rotate(-30deg);
        }

        .shield:hover img{
            transform: none;
        }
    </style>
</head>
<body>
    <div class="shield">
        ![](images/shield_1_01.png)
        ![](images/shield_1_02.png)
        ![](images/shield_1_03.png)
        ![](images/shield_1_04.png)
        ![](images/shield_1_05.png)
        ![](images/shield_1_06.png)
        ![](images/shield_1_07.png)
        ![](images/shield_1_08.png)
        ![](images/shield_1_09.png)
    </div>
</body>
</html>

旋轉(zhuǎn) 原點(diǎn):transform-origin:left top;

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>對話框</title>

    <style>
        div{
            /*border: 1px solid #000;*/
            background-color: pink;
        }

        .bigBox{
            width: 200px;
            height: 60px;
            margin-top: 40px;
            position: relative;
        }
        .smallBox{
            width: 40px;
            height: 40px;
            position: absolute;
        }

        .sBox1{
            left: 50%;
            transform: translate(-50%);
            transform: rotate(45deg);
            transform-origin: left top;
            top: -10px;
        }
        .sBox2{
            right: 0;
            top: 10px;

            transform: translateY(-50%);
            transform: rotate(45deg);
        }
        .sBox3{
            left: 50%;
            transform: translate(-50%);
            transform: rotate(45deg);
            transform-origin: left top;
            bottom: 10px;
        }
        .sBox4{
            top: 10px;
            transform: rotate(45deg);
        }
    </style>
</head>
<body>

    <div class="box1 bigBox">
        <div class="sBox1 smallBox"></div>
    </div>
    <div class="box2 bigBox">
        <div class="sBox2 smallBox"></div>
    </div>
    <div class="box3 bigBox">
        <div class="sBox3 smallBox"></div>
    </div>
    <div class="box4 bigBox">
        <div class="sBox4 smallBox"></div>
    </div>
</body>
</html>

撲克牌
心形

3D轉(zhuǎn)換

左手坐標(biāo)系

伸出左手，讓拇指和食指成“L”形，大拇指向右，食指向上，中指指向前方。這樣我們就建立了一個(gè)左手坐標(biāo)系，拇指、食指和中指分別代表X、Y、Z軸的正方向。
CSS中的3D坐標(biāo)系：
CSS3中的3D坐標(biāo)系與上述的3D坐標(biāo)系是有一定區(qū)別的，相當(dāng)于其繞著X軸旋轉(zhuǎn)了180度。
借助示例理解3D轉(zhuǎn)換：
1. 繞X軸旋轉(zhuǎn);
2. 繞Y軸旋轉(zhuǎn);
3. 繞Z軸旋轉(zhuǎn);
4. 在X軸移動;
5. 在Y軸移動;
6. 在Z軸移動。

左手法則

左手握住旋轉(zhuǎn)軸，豎起拇指指向旋轉(zhuǎn)軸正方向，正向就是其余手指卷曲的方向。

透視（perspective）

電腦顯示屏是一個(gè)2D平面，圖像之所以具有立體感（3D效果），其實(shí)只是一種視覺呈現(xiàn)，通過透視可以實(shí)現(xiàn)此目的，并不是真正的3D。
透視可以將一個(gè)2D平面，在轉(zhuǎn)換的過程當(dāng)中，呈現(xiàn)3D效果。
注：并非任何情況下需要透視效果，根據(jù)開發(fā)需要進(jìn)行設(shè)置。
perspective有兩種寫法

作為一個(gè)屬性，設(shè)置給父元素，作用于所有3D轉(zhuǎn)換的子元素；
作為transform屬性的一個(gè)值，做用于元素自身(使用較少)。

<div class="b1" transform="perspective:30px">

理解透視距離:
透視會產(chǎn)生“近大遠(yuǎn)小”的效果.

案例：

音樂盒；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3D</title>

    <style>
        body{
            background: #ccc;
        }
        div:nth-child(1){
            width: 300px;
            height: 300px;
            margin: 40px auto;

            position: relative;
        }

        div:nth-child(1)::before,div:nth-child(1)::after{
            content: "";
            width: 300px;
            height: 300px;
            position: absolute;
            left: 0;
            top: 0;
            background: url("images-3D/musict.jpg") no-repeat;
            border-radius: 50%;
            transition: all 3s;
            transform-origin: bottom;
        }

        div:nth-child(1)::before{
            background: url("images-3D/musicb.jpg");
        }

        div:nth-child(1):hover::after{
            transform: rotateX(180deg);
        }
    </style>
</head>
<body>
    <div></div>
    <audio src="images-3D/style.mp3" loop></audio>

    <script>
        var open = document.querySelector("div:nth-child(1)");
        var music = document.querySelector("audio");
        open.onmousemove = function () {
            music.play();
        };
        open.onmouseleave = function () {
            music.pause();
        }
    </script>
</body>
</html>

百度錢包；
設(shè)置元素背面是否可見：backface-visibility;；
翻轉(zhuǎn)的文字；
通過偽元素來獲取自定義屬性的值：attr(data-text);
3D導(dǎo)航；
立體導(dǎo)航欄。

3D呈現(xiàn)（transform-style）

設(shè)置內(nèi)嵌的元素在3D空間如何呈現(xiàn)，這些子元素必須為轉(zhuǎn)換原素.
flat：所有子元素在 2D 平面呈現(xiàn);
preserve-3d：保留3D空間;
3D元素構(gòu)建是指某個(gè)圖形是由多個(gè)元素構(gòu)成的，可以給這些元素的父元素設(shè)置transform-style:preserve-3d來使其變成一個(gè)真正的3D圖形。

案例：

立方體;
3D導(dǎo)航；
立體導(dǎo)航條

動畫

動畫是CSS3中具有顛覆性的特征之一，可通過設(shè)置多個(gè)節(jié)點(diǎn)來精確控制一個(gè)或一組動畫，常用來實(shí)現(xiàn)復(fù)雜的動畫效果。
必要元素：
通過@keyframes指定動畫序列；
通過百分比將動畫序列分割成多個(gè)節(jié)點(diǎn)；
在各節(jié)點(diǎn)中分別定義各屬性
通過animation將動畫應(yīng)用于相應(yīng)元素；
使用：
類似js中的函數(shù)：先定義，再調(diào)用；
定義動畫：

@keyframes 動畫名{
        from{初始狀態(tài)}
        to{結(jié)束狀態(tài)}
}

定義多組動畫：

@keyframes move{
        0%{}
        25%{}
        50%{}
        75%{}
        100%{}
}

調(diào)用：
- 基本調(diào)用方式：

animation: 動畫名稱 持續(xù)時(shí)間 (執(zhí)行次數(shù)：3，infinite);

關(guān)鍵屬性

animation-name：設(shè)置動畫序列名稱；

animation-duration動畫持續(xù)時(shí)間；
animation-delay動畫延時(shí)時(shí)間；
animation-timing-function動畫執(zhí)行速度（運(yùn)動曲線）：linear、ease等；
animation-play-state動畫播放狀態(tài)，running、paused等；
animation-direction動畫的方向：normal正常，alternate可逆等；
animation-fill-mode動畫執(zhí)行完畢后狀態(tài)：forwards（結(jié)束后保持結(jié)束時(shí)的狀態(tài)）、backwards（結(jié)束后保持開始時(shí)候的狀態(tài)）等；
animation-iteration-count動畫執(zhí)行次數(shù)：可以是具體數(shù)字或者inifinate等；
steps(60) 表示動畫分成60步完成。
參數(shù)值的順序：關(guān)鍵幾個(gè)值，除了名字、動畫時(shí)間、延時(shí)有嚴(yán)格順序要求，其它隨意。

案例

捕魚達(dá)人；
太陽系；
全屏切換；
鐘表；
大海波濤；
無縫滾動。

伸縮布局

CSS3在布局方面做了非常大的改進(jìn)，使得我們對塊級元素的布局排列變得十分靈活，適應(yīng)性非常強(qiáng)，其強(qiáng)大的伸縮性，在響應(yīng)式開中可以發(fā)揮極大的作用。
學(xué)習(xí)新的概念：
主軸：Flex容器的主軸主要用來配置Flex項(xiàng)目，默認(rèn)是水平方向；
側(cè)軸：與主軸垂直的軸稱作側(cè)軸，默認(rèn)是垂直方向的；
方向：默認(rèn)主軸從左向右，側(cè)軸默認(rèn)從上到下；
主軸和側(cè)軸并不是固定不變的，通過flex-direction可以互換。
必要元素：
指定一個(gè)盒子為伸縮盒子 display: flex;；
設(shè)置屬性來調(diào)整此盒的子元素的布局方式，例如：flex-direction；
明確主側(cè)軸及方向；
可互換主側(cè)軸，也可改變方向。

各屬性詳解

flex-direction調(diào)整主軸方向（默認(rèn)為水平方向）該屬性通過定義flex容器的主軸方向來決定felx子項(xiàng)在flex容器中的位置：

row，水平方向；
reverse-row，反轉(zhuǎn)(也反序)，從最右邊開始向左排列，順序發(fā)生改變，從最右邊開始；
column，垂直方向；
reverse-column 反轉(zhuǎn)列。
justify-content設(shè)置或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式：
flex-start，起點(diǎn)對齊；
flex-end，終點(diǎn)對齊，順序不變；
center，中間對齊；
space-around，環(huán)繞（自動平分空白區(qū)域）；
space-between，兩端對齊（中間空白區(qū)域自動平分）。
flex：多個(gè)子項(xiàng)目在主軸的縮放比例，不指定flex屬性，則不參與伸縮分配；
align-items設(shè)置或檢索彈性盒子元素在側(cè)軸（豎軸）方向上的對齊方式：
flex-start，起點(diǎn)對齊；
flex-end，終點(diǎn)對齊；
center，居中對齊；
stretch，拉伸。
flex-wrap控制是否換行；

案例

微信底部；
攜程；

多列布局

類似報(bào)紙或雜志中的排版方式，上要用以控制大篇幅文本。

/* 分幾列*/
-webkit-column-count:3;
/* 分割線*/
-webkit-column-rule:1px dashed red;
/*設(shè)置列間距*/
-webkit-column-gap:60px;
/* 列寬度*/
-webkit-column-width: 400px;

如果給標(biāo)題設(shè)置跨列等屬性：

-webkit-column-span:all;
text-align:center;

了解即可，實(shí)際意義不大。

案例

新聞

Web字體

開發(fā)人員可以為自已的網(wǎng)頁指定特殊的字體，無需考慮用戶電腦上是否安裝了此特殊字體，從此把特殊字體處理成圖片的時(shí)代便成為了過去。支持程度比較好，甚至IE低版本瀏覽器也能支持。

字體格式(認(rèn)識字體)

不同瀏覽器所支持的字體格式是不一樣的，我們有必要了解一下有關(guān)字體格式的知識。
TureType(.ttf)格式：
.ttf字體是Windows和Mac的最常見的字體，是一種RAW格式，支持這種字體的瀏覽器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+；
OpenType(.otf)格式
.otf字體被認(rèn)為是一種原始的字體格式，其內(nèi)置在TureType的基礎(chǔ)上，支持這種字體的瀏覽器有Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile、Safari4.2+；
Web Open Font Format(.woff)格式
.woff字體是Web字體中最佳格式，他是一個(gè)開放的TrueType/OpenType的壓縮版本，同時(shí)也支持元數(shù)據(jù)包的分離，支持這種字體的瀏覽器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+；
Embedded Open Type(.eot)格式
.eot字體是IE專用字體，可以從TrueType創(chuàng)建此格式字體，支持這種字體的瀏覽器有IE4+；
SVG(.svg)格式
.svg字體是基于SVG字體渲染的一種格式，支持這種字體的瀏覽器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+；
了解了上面的知識后，我們就需要為不同的瀏覽器準(zhǔn)備不同格式的字體，通常我們會通過字體生成工具幫我們生成各種格式的字體，因此無需過于在意字體格式間的區(qū)別差異。
下載字體網(wǎng)站：推薦http://www.zhaozi.cn/ 和 http://www.youziku.com/ 查找更多中文字體。
如果要在網(wǎng)頁中使用web字體（用戶電腦上沒有這種字體），具體使用步驟：
導(dǎo)入對應(yīng)的字體包；
聲明字體：告訴瀏覽器，去哪里找這個(gè)字體；
定義一個(gè)類，誰用這個(gè)類名，就會使用相應(yīng)的字體。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>web字體使用</title>

    <style>
        /*聲明字體*/
        @font-face {font-family: 'webfont';
            src: url('font/webfont.eot'); /* IE9*/
            src: url('font/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
            url('font/webfont.woff') format('woff'), /* chrome、firefox */
            url('font/webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
            url('font/webfont.svg#webfont') format('svg'); /* iOS 4.1- */
        }

        /*定義對應(yīng)的字體類*/
        .webfont{
            font-family:"webfont" !important;
            font-size:16px;font-style:normal;
            -webkit-font-smoothing: antialiased;
            -webkit-text-stroke-width: 0.2px;
            -moz-osx-font-smoothing: grayscale;}

    </style>
</head>
<body>

    <p class="webfont">尋尋覓覓，在無聲無息中消失。。。</p>
    <p>尋尋覓覓，在無聲無息中消失。。。</p>
</body>
</html>

字體圖標(biāo)

其實(shí)我們可以把文字理解成是一種特殊形狀的圖片，反之我們是不是也可以把圖片制作成字體呢？
答案是肯定的。
常見的是把網(wǎng)頁常用的一些小的圖標(biāo)，借助工具幫我們生成一個(gè)字體包，然后就可以像使用文字一樣使用圖標(biāo)了。
優(yōu)點(diǎn)：
將所有圖標(biāo)打包成字體庫，減少請求；
具有矢量性，可保證清晰度；
使用靈活，便于維護(hù)；
Font Awesome 使用介紹：http://fontawesome.dashgame.com/
定制自已的字體圖標(biāo)庫：http://iconfont.cn/ 和 https://icomoon.io/
SVG素材：http://www.iconsvg.com/
使用：
首先在阿里文字圖片里面找到需要的圖片，然后加載到本地，引入到項(xiàng)目中；
聲明圖標(biāo)文字；
定義一個(gè)類；
在需要的地方使用這個(gè)類，要配合對應(yīng)的圖片編碼（圖片編碼在demo中）使用。
需要什么圖標(biāo)查找對應(yīng)的編碼即可：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>web字體使用</title>

    <style>
        /*聲明字體*/
        @font-face {font-family: 'iconfont';
            src: url('iconfont/iconfont.eot'); /* IE9*/
            src: url('iconfont/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
            url('iconfont/iconfont.woff') format('woff'), /* chrome、firefox */
            url('iconfont/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
            url('iconfont/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
        }

        /*定義對應(yīng)的字體類*/
        .iconfont{
            font-family:"iconfont" !important;
            font-size:16px;font-style:normal;
            -webkit-font-smoothing: antialiased;
            -webkit-text-stroke-width: 0.2px;
            -moz-osx-font-smoothing: grayscale;
        }

        span::before{
            content: "\e628";
            font-family: iconfont;
            color: red;
        }
    </style>
</head>
<body>
    <span>掃碼取件</span>
    <p class="iconfont">&#xe628;</p>
</body>
</html>

兼容性

通過http://caniuse.com/ 可查詢CSS3各特性的支持程度，一般兼容性處理的常見方法是為屬性添加私有前綴，如不能解決，應(yīng)避免使用，無需刻意去處理CSS3的兼容性問題。
我們需要知道每個(gè)屬性，能被哪個(gè)版本的瀏覽器支持。

高級應(yīng)用

360 案例:

監(jiān)聽滾輪

document.onmousewheel=function(){}

需要處理兼容（我們是靠監(jiān)聽滾輪的事件來處理的）;
我們需要使用到插件，(滾屏插件) 基于jQuery 的一個(gè)插件jQuery fullPage，全屏滾動插件，中文網(wǎng)址:http://www.dowebok.com；相關(guān)說明:http://www.dowebok.com/77.html
對應(yīng)的顏色

sectionsColor:['#0da5d6', '#2AB561', '#DE8910', '#16BA9D', '#0DA5D6']

loopTop:true，滾到頂部,回到最后一屏；
js代碼：

$(function(){
    $('#dowebok').fullpage({
        sectionsColor:['#0da5d6', '#2AB561', '#DE8910', '#16BA9D', '#0DA5D6'],
        loopTop:true,
        afterLoad:function( anchorLink ,index){
            console.log(index);

            $('.section').removeClass('current');
            setTimeout(function(){
                $('.section').eq(index-1).addClass('current');
            },100);
        }
    });
});

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

10-CSS3新特性

CSS3簡介

CSS3的現(xiàn)狀

準(zhǔn)備工作

環(huán)境準(zhǔn)備

如何使用手冊

基礎(chǔ)知識

選擇器

屬性選擇器:[]

偽類選擇器

偽元素選擇器

顏色

文本 (shadow陰影)

盒模型

<span id="abc">瀏覽器私有化前綴：</span>

邊框

邊框圓角

邊框陰影

邊框圖片（了解）

漸變

線性漸變 （gradient 變化，屬于背景圖片里）

徑向漸變 (radial 徑向)

背景

background-size設(shè)置背景圖片的尺寸

background-origin(原點(diǎn)，起點(diǎn))設(shè)置背景定位的原點(diǎn)

background-clip設(shè)置背景區(qū)域clip(裁切)

以逗號分隔可以設(shè)置多背景，可用于自適應(yīng)局

案例：

過渡(transition)重點(diǎn)

案例：

2D轉(zhuǎn)換重點(diǎn)

案例

3D轉(zhuǎn)換

左手坐標(biāo)系

左手法則

透視（perspective）

案例：

3D呈現(xiàn)（transform-style）

案例：

動畫

案例

伸縮布局

各屬性詳解

案例

多列布局

案例

Web字體

字體格式(認(rèn)識字體)

字體圖標(biāo)

兼容性

高級應(yīng)用

360 案例:

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

屬性選擇器:`[]`

線性漸變（gradient 變化，屬于背景圖片里）

background-origin(原點(diǎn)，起點(diǎn))設(shè)置背景定位的原點(diǎn)

以逗號分隔可以設(shè)置多背景，可用于自適應(yīng)局

過渡(transition)`重點(diǎn)`

2D轉(zhuǎn)換`重點(diǎn)`