CSS3

CSS3介紹

如同人類的的進化一樣，CSS3是CSS2的“進化”版本，在CSS2基礎(chǔ)上，增強或新增了許多特性， 彌補了CSS2的眾多不足之處，使得Web開發(fā)變得更為高效和便捷。

• 瀏覽器支持程度差，需要添加私有前綴
• 移動端支持優(yōu)于PC端
• 不斷改進中
• 應用相對廣泛

1、 選擇器

屬性選擇器

偽類選擇器

除了以前學過的:link、:active、:visited、:hover，CSS3又新增了其它的偽類選擇器。

結(jié)構(gòu)(位置)偽類：以某元素（E）相對于其父元素或兄弟元素的位置來獲取無素；

2、過渡

過渡是CSS3中具有顛覆性的特征之一，可以實現(xiàn)元素不同狀態(tài)間的平滑過渡（補間動畫），經(jīng)常用來制作動畫效果。

幀動畫：通過一幀一幀的畫面按照固定順序和速度播放。如電影膠片

補間動畫：自動完成從起始狀態(tài)到終止狀態(tài)的的過渡。

特點：當前元素只要有“屬性”發(fā)生變化時，可以平滑的進行過渡，并不僅僅局限于hover狀態(tài)。

以上四屬性重在理解

語法：transition: property duration timing-function delay;

<style> 
div{
    width:100px;
    height:100px;
    background:blue;
    transition:width 2s;
    -moz-transition:width 2s; /* Firefox 4 */
    -webkit-transition:width 2s; /* Safari and Chrome */
    -o-transition:width 2s; /* Opera */
}
div:hover{
    width:300px;
}
</style>

**3、transform轉(zhuǎn)換 **

轉(zhuǎn)換是CSS3中具有顛覆性的特征之一，可以實現(xiàn)元素的位移、旋轉(zhuǎn)、變形、縮放，甚至支持矩陣方式，配合學習的過渡和動畫知識，可以取代大量之前只能靠Flash才可以實現(xiàn)的效果。

transform 屬性向元素應用 2D 或 3D 轉(zhuǎn)換。該屬性允許我們對元素進行旋轉(zhuǎn)、縮放、移動或傾斜。

transform: none|transform-functions;

1、移動 translate(x, y) 可以改變元素的位置，x、y可為負值；

• a) 移動位置相當于自身原來位置

• b) y軸正方向朝下

• c) 除了可以像素值，也可以是百分比，相對于自身的寬度或高度

2、縮放 scale(x, y) 可以對元素進行水平和垂直方向的縮放，x、y的取值可為小數(shù)

3、旋轉(zhuǎn) rotate(deg) 可以對元素進行旋轉(zhuǎn)，正值為順時針，負值為逆時針；

• a) 當元素旋轉(zhuǎn)以后，坐標軸也跟著發(fā)生的轉(zhuǎn)變

• b) 調(diào)整順序可以解決，把旋轉(zhuǎn)放到最后

transform-origin: x-axis y-axis

4、動畫

動畫是CSS3中具有顛覆性的特征之一，可通過設(shè)置多個節(jié)點來精確控制一個或一組動畫，常用來實現(xiàn)復雜的動畫效果。注釋：Internet Explorer 9，以及更早的版本，不支持 @keyframe 規(guī)則或 animation 屬性。

1、必要元素：

a、通過@keyframes指定動畫序列；

b、通過百分比將動畫序列分割成多個節(jié)點；

c、在各節(jié)點中分別定義各屬性

d、通過animation將動畫應用于相應元素；

2、關(guān)鍵屬性

a、animation-name設(shè)置動畫序列名稱

b、animation-duration動畫持續(xù)時間

c、animation-timing-function動畫執(zhí)行速度，linear、ease等

d、animation-delay動畫延時時間

e、animation-iteration-count動畫執(zhí)行次數(shù)，infinite等

f、animation-play-state動畫播放狀態(tài)，running、paused等

g、animation-direction動畫逆播，alternate等

h、animation-fill-mode動畫執(zhí)行完畢后狀態(tài)，forwards、backwards等

語法：animation: name duration timing-function delay iteration-count direction;

@keyframes myfirst
{
    from {background: red;}
    to {background: yellow;}
}

當您在 @keyframes 中創(chuàng)建動畫時，請把它捆綁到某個選擇器，否則不會產(chǎn)生動畫效果。

通過規(guī)定至少以下兩項 CSS3 動畫屬性，即可將動畫綁定到選擇器：

• 規(guī)定動畫的名稱
• 規(guī)定動畫的時長

div{
    animation: myfirst 5s;
    -moz-animation: myfirst 5s; /* Firefox */
    -webkit-animation: myfirst 5s;  /* Safari 和 Chrome */
    -o-animation: myfirst 5s;   /* Opera */
}

注釋：您必須定義動畫的名稱和時長。如果忽略時長，則動畫不會允許，因為默認值是 0。

什么是 CSS3 中的動畫？

動畫是使元素從一種樣式逐漸變化為另一種樣式的效果?？梢愿淖?nèi)我舛嗟臉邮饺我舛嗟拇螖?shù)。

請用百分比來規(guī)定變化發(fā)生的時間，或用關(guān)鍵詞 "from" 和 "to"，等同于 0% 和 100%。

0% 是動畫的開始，100% 是動畫的完成。為了得到最佳的瀏覽器支持，您應該始終定義 0% 和 100% 選擇器。

div{
    width:100px;height: 100px;
    background: red;
    position: absolute;
    animation: myfirst 2s;
    animation-fill-mode: forwards;
}
@keyframes myfirst{
    0%   {background: red; left:0px; top:0px;}
    25%  {background: yellow; left:200px; top:0px;}
    50%  {background: blue; left:200px; top:200px;}
    75%  {background: green; left:0px; top:200px;}
    100% {background: red; left:0px; top:0px;}
}

通過http://caniuse.com/ 可查詢CSS3各特性的支持程度，一般兼容性處理的常見方法是為屬性添加私有前綴，如不能解決，應避免使用，無需刻意去處理CSS3的兼容性問題。

在前端開發(fā)中，遇到最麻煩的事情就是瀏覽器的兼容性問題。對于這個問題的解決，通常有如下兩種思路：（了解）

優(yōu)雅降級

優(yōu)雅降級指的是一開始就構(gòu)建站點的完整功能，然后針對瀏覽器測試和修復。
“優(yōu)雅降級”觀點認為應該針對那些最高級、最完善的瀏覽器來開發(fā)網(wǎng)站。而將那些被認為“過時”或有功能缺失的瀏覽器下的測試工作安排在開發(fā)周期的最后階段，并把測試對象限定為主流瀏覽器（如 IE、Mozilla 等）的前一個版本。在這種設(shè)計范例下，舊版的瀏覽器被認為僅能提供“簡陋卻無妨 (poor, but passable)” 的瀏覽體驗。你可以做一些小的調(diào)整來適應某個特定的瀏覽器。但由于它們并非我們所關(guān)注的焦點，因此除了修復較大的錯誤之外，其它的差異將被直接忽略。

漸進增強

漸進增強一開始只構(gòu)建站點的最少特性，然后不斷針對各瀏覽器追加功能。
我們應該先讓網(wǎng)站能夠正常工作于盡可能舊的瀏覽器上，然后不斷為它在新型瀏覽器上實現(xiàn)更多的增強和改進。隨著時間的推移，當越來越多的人開始升級瀏覽器而瀏覽器本身的支持度也不斷提升時，就會有越來越多的人體驗到這些增強和改進，它持續(xù)有效的使網(wǎng)站越來越好，卻如需你刻意做什么。只需要一次實現(xiàn)，它就讓網(wǎng)站的體驗與時俱進。

兩個之間的區(qū)別

對于優(yōu)雅降級，功能衰減是從復雜的現(xiàn)狀開始，并試圖減少用戶體驗的供給，而漸進增強則是從一個非常基礎(chǔ)的，能夠起作用的版本開始，并不斷擴充，以適應未來環(huán)境的需要。功能衰減意味著往回看；而漸進增強則意味著朝前看，同時保證其根基處于安全地帶。
“它們是看待同種事物的兩種觀點”?！皟?yōu)雅降級”和“漸進增強”都關(guān)注于同一網(wǎng)站在不同設(shè)備里不同瀏覽器下的表現(xiàn)程度。關(guān)鍵的區(qū)別則在于它們各自關(guān)注于何處，以及這種關(guān)注如何影響工作的流程。

5、響應式網(wǎng)站

實例：https://willowtreeapps.com/

什么是響應式開發(fā)：可以響應不同的布局：

a) 在移動互聯(lián)日益成熟的時候，桌面瀏覽器上開發(fā)的網(wǎng)頁已經(jīng)不能滿足移動端的設(shè)備的展示和閱讀

b) 之前，通常的做法是對移動端單獨開發(fā)一套特定的版本

c) 但是，如果移動終端設(shè)備起來越多的時候賦發(fā)成本太大，是因為需要做所有屏幕的適配

d) 響應式開發(fā)的目的就是:一個網(wǎng)站能夠兼容多種終端

e) 在新建的網(wǎng)站上一般都會使用響應式開發(fā)

f) 移動web開發(fā)和響應式開發(fā)是必須具備的技能

g) 演示響應者頁面

響應式開發(fā)的原理：媒體查詢：

a) 查詢媒介，查詢到當前屏幕(媒介媒體)的寬度，針對不同的屏幕寬度設(shè)置不同的樣式來適應不同屏幕。當你重置瀏覽器大小的過程中，頁面也會根據(jù)瀏覽器的寬度和高度重新渲染頁面。簡單說，你可以設(shè)置 不同屏幕下面的不同的樣式，達到適配不同的屏幕的目的。

b) 實現(xiàn)方式：通過查詢screen的寬度來指定某個寬度區(qū)間的網(wǎng)頁布局。

超小屏幕 （移動設(shè)備）768px以下

小屏設(shè)備 768px-992px 768 <= w <992

中等屏幕 992px-1200px 992 =< w <1200

寬屏設(shè)備 1200px以上 >=1200

<style>
    .container{
        width:1200px;
        margin: 0 auto;
        height:1200px;
        background-color: red;
    }
    /*媒體查詢：注意and后面空格的添加*/
    /*iphone: w < 768px*/
    @media screen and (max-width: 768px){
        .container{
            width:100%;
            background-color: green;
        }
    }
    /*pad: w >= 768  && w< 992*/
    @media screen and (max-width: 992px) and (min-width: 768px) {
        .container{
            width:750px;
            background-color: blue;
        }
    }
    /*中等屏幕   w >= 992  && w<1200*/
    @media screen and (max-width: 1200px) and (min-width: 992px) {
        .container{
            width:970px;
            background-color: pink;
        }
    }
</style>