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

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

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

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

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

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

栗子1

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

栗子2

/*所有屬性從原始值到制定值的一個過渡，運動曲線ease,運動時間0.5秒*/
transition：all,.5s

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

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

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

上面兩個菜單，第一個沒有使用過渡，第二個使用過渡，大家明顯看到區(qū)別，使用了過渡看起來也是比較舒服！代碼區(qū)別就是有過渡的ul的上級元素(祖先元素)有一個類名（ul-transition）。利用這個類名，設(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;

}

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

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

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

栗子1

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

栗子2

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

栗子3

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

還有一個重要屬性

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

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

代碼如下

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

代碼如下

    
    




    

        

            

                

                    

                
                

                    

                
                

                    

                
                

                    

                
                

                    

                
            
            

                

                

                

                

            
        
        

            stackoverflow
        
    

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

代碼如下

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

transform:適用于2D或3D轉(zhuǎn)換的元素
transform-origin：轉(zhuǎ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ā)，更加方便！這個大家都要了解。下面是css3提供的選擇器。

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

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

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

運行效果

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

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

代碼

效果

有趣變化

那個更好看，大家看著辦

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

 
 



border-radius

運行結(jié)果

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

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

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

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

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

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

下面的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不同的三種情況

這個相信很好理解，就是制定背景的大小
下面的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;
}

這個沒什么，就是在一張圖片，使用多張背景圖片，代碼如下！
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;
}

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

-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)

對比度contrast(2)

模糊blur(3px)

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

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

Flex 布局教程：語法篇
Flex 布局教程：實例篇

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

Grid布局指南

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

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

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這個屬性，網(wǎng)上說法是：屬性允許您以特定的方式定義匹配某個區(qū)域的特定元素。

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

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

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

栗子代碼如下

 
 




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

運行效果

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

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

代碼

    
        
        
    
    
    
        
        
        
原圖
        

        
multiply正片疊底
        

        
screen濾色
        

        
overlay疊加
        

        
darken變暗
        

        
lighten變亮
        

        
color-dodge顏色減淡模式
        

        
color-burn顏色加深
        

        
hard-light強光
        

        
soft-light柔光
        

        
difference差值
        

        
exclusion排除
        

        
hue色相
        

        
saturation飽和度
        

        
color顏色
        

        
luminosity亮度
        

    

運行效果

代碼

    
        
        
    
    
    
        
原圖
        

        
multiply正片疊底
        

        
screen濾色
        

        
overlay疊加
        

        
darken變暗
        

        
lighten變亮
        

        
color-dodge顏色減淡模式
        

        
color-burn顏色加深
        

        
hard-light強光
        

        
soft-light柔光
        

        
difference差值
        

        
exclusion排除
        

        
hue色相
        

        
saturation飽和度
        

        
color顏色
        

        
luminosity亮度
        

    

運行效果

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

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