摘要：要實(shí)現(xiàn)這一點(diǎn)，必須規(guī)定兩項(xiàng)內(nèi)容指定要添加效果的屬性指定效果的持續(xù)時(shí)間。當(dāng)動(dòng)畫完成后，保持最后一個(gè)屬性值在最后一個(gè)關(guān)鍵幀中定義。在所指定的一段時(shí)間內(nèi)，在動(dòng)畫顯示之前，應(yīng)用開始屬性值在第一個(gè)關(guān)鍵幀中定義。

css3這個(gè)相信大家不陌生了，是個(gè)非常有趣，神奇的東西！有了css3，js都可以少寫很多！我之前也寫過關(guān)于css3的文章，也封裝過css3的一些小動(dòng)畫。個(gè)人覺得css3不難，但是很難用得好，用得順手，最近我也在過一遍css3的一些新特性（不是全部，是我在工作上常用的，或者覺得有用的），以及一些實(shí)例，就寫了這一篇總結(jié)！希望，這篇文章能幫到大家認(rèn)識(shí)css3。寫這篇文章主要是讓大家能了解css3的一些新特性，以及基礎(chǔ)的用法，感覺css3的魅力！如果想要用好css3，這個(gè)得靠大家繼續(xù)努力學(xué)習(xí)，尋找一些講得更深入的文章或者書籍了！如果大家有什么其他特性推薦的，歡迎補(bǔ)充！大家一起學(xué)習(xí)，進(jìn)步！

看這篇文章，代碼可以不用看得過于仔細(xì)！這里主要是想讓大家了解css3的新特性！代碼也是很基礎(chǔ)的用法。我給出代碼主要是讓大家在瀏覽器運(yùn)行一下，讓大家參考和調(diào)試。不要只看代碼，只看代碼的話，不會(huì)知道哪個(gè)代碼有什么作用的，建議邊看效果邊看代碼。

過渡，是我在項(xiàng)目里面用得最多的一個(gè)特性了！也相信是很多人用得最多的一個(gè)例子！我平常使用就是想讓一些交互效果（主要是hover動(dòng)畫），變得生動(dòng)一些，不會(huì)顯得那么生硬！好了，下面進(jìn)入正文！

引用菜鳥教程的說法：CSS3 過渡是元素從一種樣式逐漸改變?yōu)榱硪环N的效果。要實(shí)現(xiàn)這一點(diǎn)，必須規(guī)定兩項(xiàng)內(nèi)容：指定要添加效果的CSS屬性指定效果的持續(xù)時(shí)間。

transition： CSS屬性，花費(fèi)時(shí)間，效果曲線(默認(rèn)ease)，延遲時(shí)間(默認(rèn)0)

栗子1

/*寬度從原始值到制定值的一個(gè)過渡，運(yùn)動(dòng)曲線ease,運(yùn)動(dòng)時(shí)間0.5秒，0.2秒后執(zhí)行過渡*/
transition：width,.5s,ease,.2s

栗子2

/*所有屬性從原始值到制定值的一個(gè)過渡，運(yùn)動(dòng)曲線ease,運(yùn)動(dòng)時(shí)間0.5秒*/
transition：all,.5s

上面栗子是簡(jiǎn)寫模式，也可以分開寫各個(gè)屬性（這個(gè)在下面就不再重復(fù)了）

transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;

上面兩個(gè)按鈕，第一個(gè)使用了過渡，第二個(gè)沒有使用過渡，大家可以看到當(dāng)中的區(qū)別，用了過渡之后是不是沒有那么生硬，有一個(gè)變化的過程，顯得比較生動(dòng)。
當(dāng)然這只是一個(gè)最簡(jiǎn)單的過渡栗子，兩個(gè)按鈕的樣式代碼，唯一的區(qū)別就是，第一個(gè)按鈕加了過渡代碼transition: all .5s;

上面兩個(gè)菜單，第一個(gè)沒有使用過渡，第二個(gè)使用過渡，大家明顯看到區(qū)別，使用了過渡看起來也是比較舒服！代碼區(qū)別就是有過渡的ul的上級(jí)元素(祖先元素)有一個(gè)類名（ul-transition）。利用這個(gè)類名，設(shè)置ul的過渡.ul-transition ul{transform-origin: 0 0;transition: all .5s;}

可能大家不知道我在說什么！我貼下代碼吧

html

    

        

            html
            

                
div
                
h1
            
        
        

            js
            

                
string
                
array
                
object
                
number
            
        
        

            css3
            

                
transition
                
animation
            
        
        

            框架
            

                
vue
                
react
            
        
    
    



    

        

            html
            

                
div
                
h1
            
        
        

            js
            

                
string
                
array
                
object
                
number
            
        
        

            css3
            

                
transition
                
animation
            
        
        

            框架
            

                
vue
                
react
            
        
    
    

css

.demo-ul{margin-bottom: 300px;}
    .demo-ul li{
        padding: 0 10px;
        width: 100px;
        background: #f90;
        position: relative;
    }
    .demo-ul li a{
        display: block;
        height: 40px;
        line-height: 40px;
        text-align: center;
    }
    .demo-ul li ul{
        position: absolute;
        width: 100%;
        top: 40px;
        left: 0;
        transform: scaleY(0);
        overflow: hidden;
    }
    .ul-transition ul{
        transform-origin: 0 0;
        transition: all .5s;
    }
    .demo-ul li:hover ul{
        transform: scaleY(1);
    }
    .demo-ul li ul li{
        float: none;
        background: #0099ff;

}

上面兩個(gè)可以說是過渡很基礎(chǔ)的用法，過渡用法靈活，功能也強(qiáng)大，結(jié)合js，可以很輕松實(shí)現(xiàn)各種效果（焦點(diǎn)圖，手風(fēng)琴）等，以及很多意想不到的效果。這個(gè)靠大家要去挖掘！

動(dòng)畫這個(gè)平常用的也很多，主要是做一個(gè)預(yù)設(shè)的動(dòng)畫。和一些頁面交互的動(dòng)畫效果，結(jié)果和過渡應(yīng)該一樣，讓頁面不會(huì)那么生硬！

animation：動(dòng)畫名稱，一個(gè)周期花費(fèi)時(shí)間，運(yùn)動(dòng)曲線（默認(rèn)ease），動(dòng)畫延遲（默認(rèn)0），播放次數(shù)（默認(rèn)1），是否反向播放動(dòng)畫（默認(rèn)normal），是否暫停動(dòng)畫（默認(rèn)running）

栗子1

/*執(zhí)行一次logo2-line動(dòng)畫，運(yùn)動(dòng)時(shí)間2秒，運(yùn)動(dòng)曲線為 linear*/
animation: logo2-line 2s linear;

栗子2

/*2秒后開始執(zhí)行一次logo2-line動(dòng)畫，運(yùn)動(dòng)時(shí)間2秒，運(yùn)動(dòng)曲線為 linear*/
animation: logo2-line 2s linear 2s;

栗子3

/*無限執(zhí)行l(wèi)ogo2-line動(dòng)畫，每次運(yùn)動(dòng)時(shí)間2秒，運(yùn)動(dòng)曲線為 linear，并且執(zhí)行反向動(dòng)畫*/
animation: logo2-line 2s linear alternate infinite;

還有一個(gè)重要屬性

animation-fill-mode : none | forwards | backwards | both;
/*none：不改變默認(rèn)行為。    
forwards ：當(dāng)動(dòng)畫完成后，保持最后一個(gè)屬性值（在最后一個(gè)關(guān)鍵幀中定義）。    
backwards：在 animation-delay 所指定的一段時(shí)間內(nèi)，在動(dòng)畫顯示之前，應(yīng)用開始屬性值（在第一個(gè)關(guān)鍵幀中定義）。 
both：向前和向后填充模式都被應(yīng)用。  */      

這個(gè)是我用公司logo寫的動(dòng)畫，沒那么精細(xì)

代碼如下

下面讓大家看一個(gè)專業(yè)級(jí)別的

代碼如下

    
    




    

        

            

                

                    

                
                

                    

                
                

                    

                
                

                    

                
                

                    

                
            
            

                

                

                

                

            
        
        

            stackoverflow
        
    

這個(gè)代碼實(shí)在太多了，大家直接上網(wǎng)址看吧。css3-loading

代碼如下

這一部分，分2d轉(zhuǎn)換和3d轉(zhuǎn)換。有什么好玩的，下面列舉幾個(gè)！

transform:適用于2D或3D轉(zhuǎn)換的元素
transform-origin：轉(zhuǎn)換元素的位置（圍繞那個(gè)點(diǎn)進(jìn)行轉(zhuǎn)換）。默認(rèn)(x,y,z)：(50%,50%,0)

transform:rotate(30deg);

transform:translate(30px,30px);

transform:scale(.8);

transform: skew(10deg,10deg);

transform:rotateX(180deg);

transform:rotateY(180deg);

transform:rotate3d(10,10,10,90deg);

css3提供的選擇器可以讓我們的開發(fā)，更加方便！這個(gè)大家都要了解。下面是css3提供的選擇器。

圖片來自w3c。這一塊建議大家去w3c看（CSS 選擇器參考手冊(cè)），那里的例子通俗易懂。我不重復(fù)講了。
提供的選擇器里面，基本都挺好用的。但是我覺得有些不會(huì)很常用，比如，:root，:empty，:target，:enabled，:checked。而且?guī)讉€(gè)不推薦使用，網(wǎng)上的說法是性能較差[attribute*=value]，[attribute$=value]，[attribute^=value]，這個(gè)我沒用過，不太清楚。

以前沒有css3的時(shí)候，或者需要兼容低版本瀏覽器的時(shí)候，陰影只能用圖片實(shí)現(xiàn)，但是現(xiàn)在不需要，css3就提供了！

box-shadow: 水平陰影的位置 垂直陰影的位置 模糊距離 陰影的大小 陰影的顏色 陰影開始方向（默認(rèn)是從里往外，設(shè)置inset就是從外往里）;

運(yùn)行效果

border-image: 圖片url 圖像邊界向內(nèi)偏移 圖像邊界的寬度(默認(rèn)為邊框的寬度) 用于指定在邊框外部繪制偏移的量（默認(rèn)0） 鋪滿方式--重復(fù)（repeat）、拉伸（stretch）或鋪滿（round）（默認(rèn)：拉伸（stretch））;

邊框圖片（來自菜鳥教程）

代碼

效果

有趣變化

那個(gè)更好看，大家看著辦

border-radius: n1,n2,n3,n4;
border-radius: n1,n2,n3,n4/n1,n2,n3,n4;
/*n1-n4四個(gè)值的順序是：左上角，右上角，右下角，左下角。*/

 
 



border-radius

運(yùn)行結(jié)果

這一塊主要講css3提供背景的三個(gè)屬性

制定背景繪制（顯示）區(qū)域

默認(rèn)情況（從邊框開始繪制）

從padding開始繪制（顯示），不算border,，相當(dāng)于把border那里的背景給裁剪掉！（background-clip: padding-box;）

只在內(nèi)容區(qū)繪制（顯示），不算padding和border，相當(dāng)于把padding和border那里的背景給裁剪掉！（background-clip: content-box;）

引用菜鳥教程的說法：background-Origin屬性指定background-position屬性應(yīng)該是相對(duì)位置

下面的div初始的html和css代碼都是一樣的。如下
html

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

css

div
{
    border:10px dashed black;
    padding:35px;
    background:url("logo.png") no-repeat,#ccc;
    background-position:0px 0px;
}

下面看下，background-origin不同的三種情況

這個(gè)相信很好理解，就是制定背景的大小
下面的div初始的html和css代碼都是一樣的。如下
html

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

css

div
{
    border:1px dashed black;
    padding:35px;
    background:url("test.jpg") no-repeat;
}

這個(gè)沒什么，就是在一張圖片，使用多張背景圖片，代碼如下！
html

兩張圖片的背景

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

css

div
{
    border:1px dashed black;
    padding:35px;
    background-size: contain;
    background:url("test.jpg") no-repeat left,url(logo.png) no-repeat right;
}

這個(gè)也可以說是倒影，用起來也挺有趣的。

-webkit-box-reflect:方向[ above-上 | below-下 | right-右 | left-左 ]，偏移量，遮罩圖片

html

下倒影

黑白色filter: grayscale(100%)

褐色filter:sepia(1)

飽和度saturate(2)

色相旋轉(zhuǎn)hue-rotate(90deg)

反色filter:invert(1)

透明度opacity(.5)

亮度brightness(.5)

對(duì)比度contrast(2)

模糊blur(3px)

陰影drop-shadow(5px 5px 5px #000)

這里說的彈性布局，就是flex；這一塊要講的話，必須要全部講完，不講完沒什么意思，反而會(huì)把大家搞蒙！講完也是很長(zhǎng)，所以，這里我也只貼教程網(wǎng)址。博客講的很好，很詳細(xì)！

Flex 布局教程：語法篇
Flex 布局教程：實(shí)例篇

柵格化布局，就是grid；這一塊和flex一樣，要講就必須講完。這塊的內(nèi)容和flex差不多，也有點(diǎn)長(zhǎng)，這里我也貼鏈接，這個(gè)鏈接講得也很詳細(xì)！

Grid布局指南

這一塊，我也是了解過，我覺得多列應(yīng)該還是挺有用的。雖然我沒在項(xiàng)目中用過，下面我簡(jiǎn)單說下！舉個(gè)例子！這個(gè)屬性，建議加私有前綴，兼容性有待提高！
html

當(dāng)我年輕的時(shí)候，我夢(mèng)想改變這個(gè)世界；當(dāng)我成熟以后，我發(fā)現(xiàn)我不能夠改變這個(gè)世界，我將目光縮短了些，決定只改變我的國(guó)家；當(dāng)我進(jìn)入暮年以后，我發(fā)現(xiàn)我不能夠改變我們的國(guó)家，我的最后愿望僅僅是改變一下我的家庭，但是，這也不可能。當(dāng)我現(xiàn)在躺在床上，行將就木時(shí)，我突然意識(shí)到：如果一開始我僅僅去改變我自己，然后，我可能改變我的家庭；在家人的幫助和鼓勵(lì)下，我可能為國(guó)家做一些事情；然后，誰知道呢?我甚至可能改變這個(gè)世界。

css

.newspaper
{
    column-count: 3;
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-rule:2px solid #000;
    -webkit-column-rule:2px solid #000;
    -mox-column-rule:2px solid #000;
}    

box-sizing這個(gè)屬性，網(wǎng)上說法是：屬性允許您以特定的方式定義匹配某個(gè)區(qū)域的特定元素。

這個(gè)大家看著可能不知道在說什么，簡(jiǎn)單粗暴的理解就是：box-sizing:border-box的時(shí)候，邊框和padding包含在元素的寬高之內(nèi)！如下圖

box-sizing:content-box的時(shí)候，邊框和padding不包含在元素的寬高之內(nèi)！如下圖

媒體查詢，就在監(jiān)聽屏幕尺寸的變化，在不同尺寸的時(shí)候顯示不同的樣式！在做響應(yīng)式的網(wǎng)站里面，是必不可少的一環(huán)！不過由于我最近的項(xiàng)目都是使用rem布局。所以媒體查詢就沒怎么用了！但是，媒體查詢，還是很值得一看的！說不定哪一天就需要用上了！

栗子代碼如下

 
 




重置瀏覽器窗口查看效果！
如果媒體類型屏幕的可視窗口寬度小于 960 px ，背景顏色將改變。
如果媒體類型屏幕的可視窗口寬度小于 480 px ，背景顏色將改變。

運(yùn)行效果

混合模式，就像photoshop里面的混合模式！這一塊，我了解過，在項(xiàng)目上沒用過，但是我覺得這個(gè)應(yīng)該不會(huì)沒有用武之地！
css3的混合模式，兩個(gè)（background-blend-mode和mix-blend-mode）。這兩個(gè)寫法和顯示效果都非常像！區(qū)別就在于background-blend-mode是用于同一個(gè)元素的背景圖片和背景顏色的。mix-blend-mode用于一個(gè)元素的背景圖片或者顏色和子元素的。看以下代碼，區(qū)別就出來了！

這一塊圖片很多，大家看圖片快速掃一眼，看下什么效果就好！

代碼

    
        
        
    
    
    
        
        
        
原圖
        

        
multiply正片疊底
        

        
screen濾色
        

        
overlay疊加
        

        
darken變暗
        

        
lighten變亮
        

        
color-dodge顏色減淡模式
        

        
color-burn顏色加深
        

        
hard-light強(qiáng)光
        

        
soft-light柔光
        

        
difference差值
        

        
exclusion排除
        

        
hue色相
        

        
saturation飽和度
        

        
color顏色
        

        
luminosity亮度
        

    

運(yùn)行效果

代碼

    
        
        
    
    
    
        
原圖
        

        
multiply正片疊底
        

        
screen濾色
        

        
overlay疊加
        

        
darken變暗
        

        
lighten變亮
        

        
color-dodge顏色減淡模式
        

        
color-burn顏色加深
        

        
hard-light強(qiáng)光
        

        
soft-light柔光
        

        
difference差值
        

        
exclusion排除
        

        
hue色相
        

        
saturation飽和度
        

        
color顏色
        

        
luminosity亮度
        

    

運(yùn)行效果

好了，個(gè)人總結(jié)的css3的新特性，就到這里了！其中有一些新特性如果想使用的好，必須多去了解和練習(xí)。有些新特性，如果要多帶帶詳細(xì)的講，比如動(dòng)畫，過渡，彈性盒子，漸變等。估計(jì)可以寫幾篇或者十幾篇文章！特別是動(dòng)畫，估計(jì)寫一本書都可以！上面對(duì)css3新特性的講解和案例，都是基礎(chǔ)的認(rèn)識(shí)和用法，希望能起到一個(gè)拓展思維的作用。最重要的是，大家要多加練習(xí)，實(shí)操是最重要的一環(huán)，孰能生巧也是這樣來的！css3不僅要會(huì)用，也要用好，用好css3，在項(xiàng)目的開發(fā)上，很有幫助的！當(dāng)然如果我有發(fā)現(xiàn)什么好玩的，有用的，我會(huì)繼續(xù)寫文章。
最后，如果大家覺得我哪里寫錯(cuò)了，寫得不好，或者有什么推薦的！歡迎指點(diǎn)！

-------------------------華麗的分割線--------------------
想了解更多，關(guān)注關(guān)注我的微信公眾號(hào)：守候書閣