整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
者按：在WWDC 2014之前我就打算把這篇文章翻譯出來與大家分享；好在WWDC 2014上CSS Shape也露了一臉。快點(diǎn)閱讀本文，了解初出茅廬的CSS Shape是何方神圣吧！
方框套方框：這就是目前網(wǎng)頁的樣子。長(zhǎng)久以來，我們努力嘗試使用CSS來創(chuàng)建幾何形狀來突破這種限制。但是這些形狀無法影響其包含內(nèi)容的形狀。同樣，元素的形狀也無法被其他元素所影響。
2012年中旬，由Adobe提出的CSS Shape規(guī)范打破了這個(gè)限制。該規(guī)范的目標(biāo)是為設(shè)計(jì)師提供一種新的方式，改變?nèi)我鈴?fù)雜形狀周圍或者內(nèi)部?jī)?nèi)容布局。這些事情之情從來沒有被實(shí)現(xiàn)過，JavaScript也沒有。
例如，注意看在下面這個(gè)設(shè)計(jì)中文本環(huán)繞圓形圖片的樣子。沒有形狀的話，文本變成長(zhǎng)方形——拋棄了精致的邊緣，這種精致可不是把設(shè)計(jì)帶到了下一個(gè)高度。
注意例子中文本是如何環(huán)繞圓形的那個(gè)碗的。通過CSS Shape，我們可以在網(wǎng)頁上創(chuàng)建類似的設(shè)計(jì)。
接下來我們一起來看看Shape是如何工作，并開始使用它們。
結(jié)合其他一些最新的特性，例如Clipping與Masking、CSS Filters和Compositing與Blending，無需借助像Photosho或者InDesign這樣 的圖像編輯器，CSS Shape允許我們創(chuàng)造更漂亮更精致的設(shè)計(jì)。
新版的CSS Shape規(guī)范也會(huì)聚焦形狀內(nèi)部的內(nèi)容。例如，現(xiàn)在可以很輕松地使用CSS創(chuàng)建一個(gè)菱形：只需把元素旋轉(zhuǎn)45度，然后把元素里面的內(nèi)容旋轉(zhuǎn)回來，相對(duì)頁面是橫向的。但是其形狀沒法受到其容器菱形的影響，因此還是矩形的。如果CSS Shape的shape-inside屬性實(shí)現(xiàn)了，我們就可以讓內(nèi)容也是菱形的，要實(shí)現(xiàn)下這圖這樣的布局就沒什么不可能了。
很快，CSS Shape將支持定義內(nèi)部文本的形狀，比如這些菱形，與它的容器邊緣保持一致，而不溢出或者被截?cái)唷?/i>
為了在Chrome Canary中使用CSS Shape，你需要開啟試驗(yàn)特性標(biāo)記。如果你不知道怎么打開，可以看看Adobe博客上的這篇參考。
可以使用下面這幾個(gè)函數(shù)來定義形狀：
每個(gè)形狀都由一組坐標(biāo)定義。有些函數(shù)接受坐標(biāo)點(diǎn)作為參數(shù)，另外一些接受偏移量——但是最終它們都把形狀當(dāng)做元素上一系列的點(diǎn)來描繪。在下面的例子中，我們將為大家講解每個(gè)方法所接受的參數(shù)。
一個(gè)形狀還可以通過提取圖片的一個(gè)Alpha通道來定義。如果把一張圖片傳遞給Shape屬性，瀏覽器就會(huì)基于圖片的臨界值提取形狀。形狀的定義基于圖片上每一個(gè)點(diǎn)的Alpha通道是否高于臨界值。不過圖片必須是CORS compatible的。無論何種原因（比如圖片不存在），只要圖片不能正常顯示，就不會(huì)產(chǎn)生形狀。
可接受上面這些函數(shù)作為值的Shape屬性有：
可以把shape-margin和shape-outside屬性結(jié)合使用，定義形狀周圍的margin，以此隔開浮動(dòng)的內(nèi)容和形狀，在形狀和內(nèi)容之間留出更多的空間。與shape-outside和shape-margin對(duì)應(yīng)一樣，shape-inside有對(duì)應(yīng)的shape-padding屬性，用來添加內(nèi)間距。
一行代碼就可以使用Shape屬性和函數(shù)來定義一個(gè)形狀：
.element {
shape-outside: circle; /* content will flow around the circle defined on the element */
}
或者：
.element {
shape-outside: url(path/to/image-with-shape.png);
}
但是。。。
要讓這行CSS生效，必須滿足兩個(gè)條件：
看上面函數(shù)的定義，形狀都是由一組坐標(biāo)定義的。因?yàn)檫@些點(diǎn)是坐標(biāo)，所以需要坐標(biāo)系統(tǒng)，這樣瀏覽器才知道把這些點(diǎn)放在元素的什么位置上。因此，加上下面這段代碼上面的例子就可以正常工作。
.element {
float: left;
height: 10em;
width: 15em;
shape-outside: circle;
}
給定固有的維數(shù)并不會(huì)影響響應(yīng)性（隨后我們進(jìn)行更深入的探討）。
既然形狀是由一系列帶坐標(biāo)的點(diǎn)定義的，那更改這些點(diǎn)的坐標(biāo)就可以相應(yīng)的更改形狀。舉個(gè)例子，下面的六邊形是使用polygon這個(gè)方法創(chuàng)建的。整個(gè)形狀由六個(gè)點(diǎn)構(gòu)成。更改黃點(diǎn)的橫坐標(biāo)將會(huì)影響產(chǎn)生的形狀，應(yīng)用了此形狀元素的內(nèi)部或者外部的內(nèi)容布局方式也會(huì)受到影響。
如果元素右浮動(dòng)，且應(yīng)用了這個(gè)形狀，當(dāng)在polygon函數(shù)中黃點(diǎn)的橫坐標(biāo)變化的時(shí)候，在元素左側(cè)的內(nèi)容的浮動(dòng)方式也會(huì)改變。
默認(rèn)把外邊界Box作為參考——因此，如果你應(yīng)用了形狀的元素的底部有外邊界，則形狀會(huì)延伸到外邊jie上，而不是元素的邊框區(qū)域。如果你想使用其他Box值，你可以在形狀函數(shù)之后指定，然后傳遞給Shape屬性。
shape-outside: circle(250px at 50% 50%) padding-box;
上面這條規(guī)則中的padding-box關(guān)鍵字，把形狀限定在了元素的內(nèi)邊框Box中。circle函數(shù)定義了一個(gè)環(huán)狀的形狀，包括這個(gè)形狀的大小和在這個(gè)元素上的位置。
使用CSS Shape，讓文本環(huán)繞圓形的用戶頭像。文本將不再是長(zhǎng)方形的。
使用circle函數(shù)給頭像添加一個(gè)圓形：
<img src="http://api.randomuser.me/0.3.2/portraits/men/7.jpg" alt="profile image" />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum itaque nam blanditiis eveniet enim eligendi quae adipisci?</p>
<p>Assumenda blanditiis voluptas tempore porro quibusdam beatae deleniti quod asperiores sapiente dolorem error! Quo nam quasi soluta reprehenderit laudantium optio ipsam ducimus consequatur enim fuga quibusdam mollitia nesciunt modi.</p>
你可能會(huì)問，“為什么不使用border-radius來做出圖片的圓角？”答案就是border-radius無法影響元素周圍或者內(nèi)部的內(nèi)容的布局。它只能影響元素的邊框和背景。背景區(qū)域會(huì)被裁剪成圓角，但是它功能僅限于此。元素內(nèi)部的內(nèi)容任然是矩形的，而且周圍的內(nèi)容還是把元素當(dāng)做一個(gè)矩形的存在——本質(zhì)上它還是。
我們使用border-radius讓圖片變圓——我們通常都是這樣讓圖片等其他元素變圓的。圖片bian'yuan
img {
float: left;
width: 150px;
height: 150px;
border-radius: 50%;
margin-right: 15px;
}
不添加CSS Shape，文本任然把圖片當(dāng)做矩形的，因此還是圍繞成一個(gè)矩形，而不是圓的。
在不支持CSS Shape屬性的瀏覽器中，原型圖片周圍的內(nèi)容就像環(huán)繞在一個(gè)不是圓形的圖片周圍。這就是在較老瀏覽器中CSS Shape降級(jí)的效果。的
為了改變內(nèi)容布局以適應(yīng)特定的形狀，我們使用Shape屬性：
img {
float: left;
width: 150px;
height: 150px;
border-radius: 50%;
shape-outside: circle;
shape-margin: 15px;
}
有了這些代碼，文本會(huì)看到一個(gè)圓的形狀在圖片上，環(huán)繞之，就像第一張截圖那樣（你可以在這里看到）。在不支持的瀏覽器中，將降級(jí)為第二張圖顯示的哪樣。
你可以像上面那樣使用circle函數(shù)，也可以傳遞參數(shù)給它。下面是它的語法：
circle=circle( [<shape-radius>]? [at <position>]? )
問號(hào)標(biāo)示這些參數(shù)是可選的。省略的參數(shù)將會(huì)被瀏覽器使用默認(rèn)值補(bǔ)全。如果你直接使用circle而未指定圓形的位置，它會(huì)定義一個(gè)放在元素正中間的圓形。
你可以指定圓形的半徑，什么單位都可以（px、em、pt等等）。你甚至可以指定使用closest-side或者furthest-side作為半徑，closest-side是默認(rèn)值，即瀏覽器會(huì)把從中點(diǎn)到最近邊的長(zhǎng)度作為圓形的半徑。furthest-side則是使用中心到最遠(yuǎn)邊的距離。
shape-outside: circle(farthest-side at 25% 25%); /* defines a circle whose radius is half the length of the longest side, positioned at the point of coordinates 25% 25% on the element’s coordinate system*/
shape-inside: circle(250px at 500px 300px); /* defines a circle whose center is positioned at 500px horizontally and 300px vertically, with a radius of 250px */
eclipse函數(shù)與circle還是函數(shù)是一樣，除了接受兩個(gè)半徑參數(shù)以外（后者是一個(gè)參數(shù)列表）——一個(gè)是x軸的半徑，一個(gè)是y軸的——是一直的。
ellipse=ellipse( [<shape-radius>{2}]? [at <position>]? )
與circle和eclipse沒有直接的關(guān)系，inset函數(shù)再元素內(nèi)部創(chuàng)建一個(gè)矩形。既然元素本身就是矩形的，我們當(dāng)然不需要更多的矩形。inset實(shí)際上可以幫助我們?cè)谠貎?nèi)部創(chuàng)建一個(gè)帶有圓角的矩形。文本內(nèi)容可以環(huán)繞在圓角周圍。
inset函數(shù)接受1到4個(gè)值指定從參考Box邊緣向內(nèi)的距離。這可以控制這個(gè)矩形在元素內(nèi)部的位置。這個(gè)函數(shù)還接受一個(gè)可選參數(shù)，設(shè)置內(nèi)部矩形的圓角。且圓角的設(shè)置于border-radius的方法一致，使用一到四個(gè)值，于關(guān)鍵字round結(jié)合在一起。
inset=inset( offset{1,4} [round <border-radius>]? )
在一個(gè)浮動(dòng)的元素中創(chuàng)建一個(gè)帶圓角的矩形：
.element {
float: left;
width: 250px;
height: 150px;
shape-outside: inset(0px round 100px) border-box;
}
在這里查看實(shí)際的例子。
最后一個(gè)Shape函數(shù)是polygon，它可以是用任意數(shù)量的點(diǎn)來定義更加復(fù)雜的形狀。這個(gè)函數(shù)接受一系列的坐標(biāo)，每個(gè)坐標(biāo)定義多邊形的一個(gè)邊角，合在一起組成整個(gè)圖形。
在下面的例子中，一張右浮動(dòng)的圖片使用viewport單位，占滿了整個(gè)屏幕。我們希望左側(cè)的文本可以沿著圖片內(nèi)部的沙漏浮動(dòng)，因此，我們使用polygon函數(shù)在圖片上定義了一個(gè)不規(guī)則的的圖形。
圖片的CSS：
img.right {
float: right;
height: 100vh;
width: calc(100vh + 100vh/4);
shape-outside: polygon(40% 0, 100% 0, 100% 100%, 40% 100%, 45% 60%, 45% 40%);
}
你可以使用長(zhǎng)度單位或者百分比來定義邊角的坐標(biāo)，我使用的是百分比。
這段代碼就是顯示出圖片的效果，你可以看到，Shape函數(shù)無法影響形狀外的圖片。事實(shí)上，一個(gè)形狀除了影響內(nèi)容的浮動(dòng)之外無法對(duì)元素造成其他任何影響，不管這個(gè)元素是圖片還是容器或者其他的什么。
為了讓我們創(chuàng)建的多邊形更有存在感，我們需要把形狀之外的圖片摳掉。這就需要CSS Masking模塊的clip-path屬性來幫忙了。
clip-path屬性接受同樣的Shape函數(shù)和參數(shù)座位形狀屬性。如果我們把傳遞給shape-outside的多邊形傳遞給clip-path屬性，它會(huì)把形狀之外的圖片全部摳掉。
img.right {
float: right;
height: 100vh;
width: calc(100vh + 100vh/4);
shape-outside: polygon(40% 0, 100% 0, 100% 100%, 40% 100%, 45% 60%, 45% 40%);
/* clip the image to the defined shape */
clip-path: polygon(40% 0, 100% 0, 100% 100%, 40% 100%, 45% 60%, 45% 40%);
}
看效果：
目前，使用clip-path還需要使用前綴，這個(gè)例子clip-path使用了-webkit-前綴，因此可以在Chrome中工作，你點(diǎn)擊查看demo。
clip-path屬性確實(shí)是Shape屬性的好伙伴，因?yàn)樗梢詭椭癸@被創(chuàng)建的形狀，摳掉元素上所有不再形狀內(nèi)部的部分。你自然會(huì)經(jīng)常發(fā)現(xiàn)把clip-path個(gè)Shape屬性結(jié)合使用。
polygon函數(shù)還接受一個(gè)可以可選的參數(shù)fill，有兩個(gè)值，nonzero和even odd。指明如何對(duì)待多邊形自己內(nèi)部的交錯(cuò)區(qū)域。更多信息可以查看SVG fill-rule。
像素的alpha通道的值是否超過某個(gè)臨界值，這是定義形狀的依據(jù)。默認(rèn)的臨界值是0.0（完全透明），你也可以通過shape-image-threshold屬性來定義。因此，所有不透明的像素點(diǎn)都是形狀的一部分。
有可能，新版的CSS Shape不但可以使用alpha通道，還可以使用亮度。果真如此的話，shape-image-threhold將被擴(kuò)展，支持亮度或者alpha通道，基于不同狀態(tài)間的切換。
我們將使用下面這張圖，定義元素的形狀，讓文本環(huán)繞之：
使用shape-outside屬性，傳遞一個(gè)url值，指向我們想要的圖片。
.leaf-shaped-element {
float: left;
width: 400px;
height: 400px;
shape-outside: url(leaf.png);
shape-margin: 15px;
shape-image-threshold: 0.5;
background: #009966 url(path/to/background-image.jpg);
mask-image: url(leaf.png);
}
當(dāng)然，如果元素有背景圖片的話，需要把形狀之外的部分去掉。不過clip-path無法接受一張帶透明度的圖片座位參數(shù)，我們 可以使用Masking Module的mask-image（需要對(duì)應(yīng)的前綴）屬性來實(shí)現(xiàn)。看看效果：
如果你需要?jiǎng)?chuàng)建一個(gè)復(fù)雜的形狀，推薦你使用圖片來定義。你可以通過Photoshop來定義alpha通道，比起手動(dòng)指定定點(diǎn)方便多了。
還有，如果你元素上又多個(gè)浮動(dòng)或者多個(gè)被排除的區(qū)域，你更愿意使用圖片而不是形狀。因?yàn)椋辽偈乾F(xiàn)在，你無法在一個(gè)元素上定義多個(gè)形狀。但是如果圖片包含多個(gè)區(qū)域，瀏覽器可以把這些區(qū)域提取出來并使用之。
不過shape-inside還不是響應(yīng)式的，原因是它被推遲到了Module Level 2中。當(dāng)前版本中不盡人意的地方將在下一版本中解決。
Adobe Web平臺(tái)開發(fā)組開發(fā)出了一個(gè)更高級(jí)，交互式的Shape工具。這個(gè)工具最近作為Brackets編輯器的一個(gè)插件公布出來，Brackets編輯器是Adobe團(tuán)隊(duì)打造的一個(gè)免費(fèi)編輯器。它允許你直接在瀏覽器中可視化地編輯圖形，還包含一個(gè)預(yù)覽版的功能——在你在頁面上編輯圖形的同時(shí)，更新編輯器中的樣式表。這給你提供了直接視覺反饋，可以讓你看到你的形狀是如何與頁面上的其他元素交互的。
使用Brackets的預(yù)覽模式，在右邊的瀏覽器中編輯多邊形。截圖由Razvan Caliman提供。
這個(gè)工具不可或缺，因?yàn)樗蟠蠛?jiǎn)化了形狀的創(chuàng)建、編輯和調(diào)試。 Razvan Caliman再Brackets的博客上發(fā)布了一篇文章，說明如何再Brackets中使用Shape編輯器。
將來，CSS Exclusion允許我們像引文一樣讓文本環(huán)繞著形狀，如這張雜志的布局所示。引文甚至可以是圓形的，文本也可以很好的環(huán)繞在它周圍。圖片來自Justin Thomas Kay。
類似的布局，具有形狀的元素絕對(duì)定位在文本在中間——四面都有文本環(huán)繞——將來也沒什么不可能。
現(xiàn)在你就可以使用CSS Shape，作為漸進(jìn)增強(qiáng)的一部分，確保在不支持的瀏覽器中可以優(yōu)雅的降級(jí)。我最近開始把它們用在我自己的網(wǎng)站上，降級(jí)很”正常”。對(duì)于更加復(fù)雜的設(shè)計(jì)，你可以使用腳本來檢測(cè)瀏覽器是否支持Shape，提供降級(jí)方案。你也可以使用這段腳本擴(kuò)展Modernizr的測(cè)試集，來測(cè)試瀏覽器是否支持shape-outside，也可以直接下載一份自定義的包含了這個(gè)測(cè)試的版本。
CSS Shape填平了印刷排版和Web設(shè)計(jì)之間的溝壑。本文中的示例都很簡(jiǎn)單，不過你應(yīng)該學(xué)到的這些基礎(chǔ)，有助于你實(shí)現(xiàn)像雜志或者海報(bào)一樣復(fù)雜的設(shè)計(jì)——無需擔(dān)心你還需要針對(duì)屏幕重新設(shè)計(jì)。無論你在尋找什么——從非矩形布局到Shape動(dòng)畫——馬上開始實(shí)驗(yàn)吧。
原文：CSS Shapes 101 · An A List Apart Article
— 完 —
作步驟
1、打開一篇具有原始數(shù)據(jù)的WPS工作表，在功能區(qū)選擇“插入”選項(xiàng)卡，單擊“形狀”圖標(biāo)，在出現(xiàn)的下拉按鈕中選擇插入一個(gè)形狀，小編在這里插入“菱形”；
2、選中插入的“菱形”，然后單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“設(shè)置對(duì)象格式”命令；
3、在“設(shè)置對(duì)象格式”的對(duì)話框中我們將填充顏色設(shè)置為“無填充顏色”然后單擊“確定”；
4、此時(shí)你會(huì)看到我們插入的圖形已經(jīng)變成了透明色，然后我們選中整個(gè)表格，同時(shí)按住鍵盤上的“Ctrl+c"進(jìn)行剪切；
5、然后把剪切的表格通過鍵盤上的“Ctrl+v”粘貼到我們的圖形里邊，然后選擇插入的圖形，單擊“效果設(shè)置”選項(xiàng)卡，選擇“三維效果”中的第二個(gè)效果樣式；
6、返回到工作表中就可以看到我們?cè)O(shè)置的三維效果的表框了；
提示：在把表格粘貼到我們的圖形的過程中的時(shí)候，有時(shí)候需要我們選中圖形進(jìn)行調(diào)整，把它調(diào)到適合整個(gè)表格的最佳效果，另外我們還可以在“效果設(shè)置”選項(xiàng)卡中通過“顏色”選項(xiàng)組來進(jìn)行圖形的顏色設(shè)置。
天我們學(xué)習(xí)的內(nèi)容有：過渡，動(dòng)畫，轉(zhuǎn)換，伸縮盒子。
可以說今天學(xué)習(xí)的內(nèi)容都是重量級(jí)的大佬，學(xué)好了，使用css3做出酷炫的效果 So Easy！~~
1.過渡
在css3中，有一個(gè)屬性可以設(shè)置過渡效果。
它就是transition，所謂的過渡效果，指的就是以動(dòng)畫的形式慢慢演化樣式屬性變化的過程。
A.案例：通過transition設(shè)置焦點(diǎn)過渡效果
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>div{width: 200px;height: 200px;margin:200px;background: url(girl.jpg);border-radius:50%;transition:all 1s linear 0.3s;cursor: pointer;}div:hover{box-shadow: 0px 0px 20px blue;}</style></head><body><div></div></body></html>
注意頁面中的代碼：
第一，我們給div添加了一個(gè)hover偽類樣式，當(dāng)我們鼠標(biāo)懸停在div上方的時(shí)候，會(huì)給div盒子添加一個(gè)藍(lán)色的盒子陰影。
第二，我們給div盒子添加了一個(gè)transition樣式，設(shè)置的值為：all 1s linear 0.3s;
這四個(gè)數(shù)據(jù)分別對(duì)應(yīng)
transition-property(需要過渡的屬性)：如果設(shè)置為all表示所有樣式屬性都需要過渡。
transition-duration(過渡的時(shí)間):以秒作為單位，設(shè)置過渡的時(shí)間
transition-timing-function(過渡的方式):常用的有l(wèi)inear(勻速)，ease(先慢后快)，ease-in，ease-out，ease-in-out等
transition-delay(延遲的時(shí)間):以秒作為單位進(jìn)行延遲，延遲之后開始進(jìn)行過渡效果。
所以，我們通過transition這個(gè)復(fù)合屬性設(shè)置的過渡效果為：
all:需要過渡所有的屬性
1s:過渡的時(shí)間為1秒
linear:勻速過渡
0.3s:在延遲0.3秒之后開始過渡動(dòng)畫。
如果大家理解了上面的描述，那么也就不難理解咱們鼠標(biāo)放到div上之后，為啥會(huì)慢慢出現(xiàn)藍(lán)色的光暈了，就是因?yàn)樵蹅兲砑恿诉^渡，所以，慢慢的就會(huì)給盒子添加陰影效果。
2.動(dòng)畫：
在學(xué)習(xí)完了過渡之后，發(fā)現(xiàn)咱們可以使用transition去以動(dòng)畫的形式展示樣式的改變以及變化的過程，這可以幫助我們來實(shí)現(xiàn)一些過渡的動(dòng)畫。
但是，有的時(shí)候，我們的需求會(huì)更加的復(fù)雜，要求會(huì)更加的多變，那么，transition可能就無法滿足我們的需要了，我們需要有更加炫酷，復(fù)雜的效果呈現(xiàn)。
那么，動(dòng)畫animation就可以滿足我們的需要。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>@keyframes moveAndChange{0%{left:0px;top:0px;}25%{left:200px;top:200px;background:green;border-radius: 0;}50%{left:400px;top:200px;background:blue;border-radius: 50%;}75%{left:400px;top:0px;background:#ccc;border-radius: 0;}100%{left:0px;top:0px;background:red;border-radius: 50%;}}div{margin:200px;width: 200px;height: 200px;position: absolute;background:red;border-radius:50%;animation: moveAndChange 5s linear 0.5s infinite normal;}</style></head><body><div></div></body></html>
代碼效果如下：
同樣，讓我們來關(guān)注編寫的代碼：
1.在樣式中，首先我們使用@keyframes 來定義了一個(gè)復(fù)雜的動(dòng)畫，在css3中，新增了@keyframes可以來幫助我們添加動(dòng)畫。代碼如下：
/*動(dòng)畫的名字叫做moveAndChange*/
@keyframes moveAndChange{
/*動(dòng)畫最初的時(shí)候，將left設(shè)置為0px，top設(shè)置為0px*/
0%{
left:0px;
top:0px;
}
/*當(dāng)動(dòng)畫進(jìn)行到25%的時(shí)候，使用動(dòng)畫將left過渡到200px，top過渡到200px，
背景顏色過渡為綠色，圓角過渡為0(無圓角)*/
25%{
left:200px;
top:200px;
background:green;
border-radius: 0;
}
/*當(dāng)動(dòng)畫進(jìn)行到50%的時(shí)候，使用動(dòng)畫將left過渡到400px，top過渡到200px，
背景顏色過渡為藍(lán)色，圓角過渡為50%(正圓)*/
50%{
left:400px;
top:200px;
background:blue;
border-radius: 50%;
}
/*當(dāng)動(dòng)畫進(jìn)行到75%的時(shí)候，使用動(dòng)畫將left過渡到400px，top過渡到0，
背景顏色過渡為灰色，圓角過渡為0(無圓角)*/
75%{
left:400px;
top:0px;
background:#ccc;
border-radius: 0;
}
/*當(dāng)動(dòng)畫結(jié)束的時(shí)候，使用動(dòng)畫將left過渡到0x，top過渡到0px，
背景顏色過渡為紅色，圓角過渡為50%(正圓)*/
100%{
left:0px;
top:0px;
background:red;
border-radius: 50%;
}
}
這是一個(gè)比較復(fù)雜的動(dòng)畫效果，可以發(fā)現(xiàn)，它通過百分比的形式將一個(gè)完整的動(dòng)畫拆分成了5個(gè)部分，每個(gè)部分都有不同的樣式效果，而當(dāng)我們采用該動(dòng)畫的元素就會(huì)按照設(shè)置的順序和樣式效果進(jìn)行動(dòng)畫的過渡和展示。
2.上面我們只是通過@keyframes創(chuàng)建了一個(gè)動(dòng)畫，我們還需要通過特定的語法來使用這個(gè)動(dòng)畫。
就是下面這句代碼了：
animation: moveAndChange 5s linear 0.5s infinite normal;
它是一個(gè)復(fù)合屬性，設(shè)置了6個(gè)值，分別對(duì)應(yīng)：
animation-name(設(shè)置動(dòng)畫的名稱)：用來設(shè)置動(dòng)畫的名字，我們這里寫的是moveAndChange ，也就是說我們就是要使用我們剛剛創(chuàng)建的動(dòng)畫。
animation-duration(設(shè)置整個(gè)動(dòng)畫的時(shí)間):以秒作為單位，我們這里寫的是5s，表示整個(gè)動(dòng)畫的時(shí)間為5秒
animation-timing-function(設(shè)置播放動(dòng)畫的方式)：播放動(dòng)畫的方式，常用的有l(wèi)inear(勻速)，ease(先慢后快)，ease-in，ease-out，ease-in-out等，我們使用的是linear勻速播放動(dòng)畫。
animation-delay(設(shè)置動(dòng)畫的延遲):以秒作為單位，我們寫的是0.5s，表示延遲0.5秒之后開始播放動(dòng)畫。
animation-iteration-count(設(shè)置動(dòng)畫播放的次數(shù)):播放動(dòng)畫的次數(shù)，我們這里寫的是infinite ，表示動(dòng)畫將會(huì)被播放無限次，如果寫數(shù)字，那么就會(huì)播放數(shù)字對(duì)應(yīng)的次數(shù)。
animation-direction(設(shè)置是否反向播放動(dòng)畫)：我們寫的是normal，表示正常播放動(dòng)畫，如果寫的是
alternate則表示要反向播放動(dòng)畫，大家也可以自己試一試這個(gè)效果。
最終，我們通過@keyframes創(chuàng)建動(dòng)畫，通過animation設(shè)置動(dòng)畫，成功完成了這個(gè)復(fù)雜的動(dòng)畫效果。
3.轉(zhuǎn)換
在css3中，我們通過transform屬性可以設(shè)置元素的轉(zhuǎn)換效果，具體的效果如下：
A.平移
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>body{background:pink;}div{width: 200px;height: 200px;position: absolute;background: green;left:0px;top:0px;transform: translate(300px,300px);}</style></head><body><div></div></body></html>
代碼效果如下：
如上圖所示，本來div盒子的位置是left:0,top:0;
但是我們通過transform: translate(300px,300px);將盒子進(jìn)行了偏移，所以，盒子的位置發(fā)生了改變。
B.旋轉(zhuǎn)
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>body {background: pink;}div {width: 200px;height: 200px;margin: 200px;position: absolute;background: green;left: 0px;top: 0px;transform: rotate(45deg);}</style></head><body><div></div></body></html>
代碼效果如下：
如上圖所示，本來div盒子應(yīng)該是四四方方的。
但是，經(jīng)過我們的代碼transform: rotate(45deg); //deg為單位，表示度數(shù)。
進(jìn)行了45度的旋轉(zhuǎn)之后，呈現(xiàn)出來的就是一個(gè)菱形的盒子了，旋轉(zhuǎn)的正方向?yàn)轫槙r(shí)針，負(fù)方向?yàn)槟鏁r(shí)針。
C.縮放
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>body {background: pink;}div {width: 200px;height: 200px;margin: 200px;position: absolute;background: green;left: 0px;top: 0px;transform: scale(0.5,0.25);}</style></head><body><div></div></body></html>
代碼效果如下：
如上圖所示，本來盒子的寬高為200*200,而我們通過transform: scale(0.5,0.25);進(jìn)行的縮放
scale的第一個(gè)參數(shù)為0.5,表示橫向縮小為0.5倍
scale的第二個(gè)參數(shù)為0.25，表示縱向縮小為0.25倍。
scale的參數(shù)如果為1，則表示不進(jìn)行任何縮放，小于1就是做縮小，而大于1表示做放大。
小結(jié)：transform轉(zhuǎn)換中其實(shí)還包含了skew(傾斜)，matrix(矩陣轉(zhuǎn)換)，相對(duì)來說用到的不是特別多，所以在本文中我們便不再做介紹。
4.flex布局
Flex布局，可以簡(jiǎn)便、完整、響應(yīng)式地實(shí)現(xiàn)各種頁面布局。
Flex是Flexible Box的縮寫，翻譯成中文就是“彈性盒子”，用來為盒裝模型提供最大的靈活性。任何一個(gè)容器都可以指定為Flex布局。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>div{box-sizing: border-box;}.parent {width: 600px;height: 200px;margin: 100px;position: absolute;background: green;left: 0px;top: 0px;display: flex;justify-content: flex-start}.parent div{width: 20%;border:1px solid #ccc;background:pink;}</style></head><body><div><div>1</div><div>2</div><div>3</div><div>4</div></div></body></html>
代碼效果如下：
如圖所示，咱們通過display:flex將.parent元素設(shè)置為了flex盒子，那么子元素將會(huì)按照justify-content設(shè)置的方式進(jìn)行元素的排列，目前看來，和我們沒有設(shè)置flex盒子的效果是一致的。
接下來我們更改一下，將justify-content設(shè)置為flex-end，效果如下圖所示：
所以我們就應(yīng)該發(fā)現(xiàn)，flex-start是讓所有的子元素從父元素的左側(cè)開始排列
而flex-end是讓所有的子元素從元素的右側(cè)開始排列。
我們?cè)賮砀囊幌拢瑢ustify-content設(shè)置為center，效果如下圖所示：
更厲害了，子元素在父盒子的中央位置排列顯示了。
然后，我們?cè)賹ustify-content設(shè)置為space-around，效果如下圖所示：
它是平均分配的形式為每一個(gè)子元素設(shè)置了間距，但是看起來有點(diǎn)變扭。
所以我們推薦將justify-content設(shè)置為space-between，效果如下圖：
我們還可以通過flex-wrap來設(shè)置子元素是否換行顯示，以及flex-direction設(shè)置子元素排列的順序。
這兩個(gè)屬性可以設(shè)置的值如下：
flex-wrap: nowrap;//不換行，會(huì)自動(dòng)收縮
flex-wrap: warp;//換行，會(huì)自動(dòng)收縮
flex-wrap: warp-reverse;//反轉(zhuǎn)，從默認(rèn)的從上到下排列反轉(zhuǎn)為從下到上。
flex-direction:row; //從左至右一行一行進(jìn)行子元素的排列
flex-direction:column; //從上到下一列一列進(jìn)行子元素的排列
flex-direction:row-reverse; //從右至左一行一行進(jìn)行子元素的排列
flex-direction:column-reverse; //從下到上一列一列進(jìn)行子元素的排列
案例代碼如下：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>div{box-sizing: border-box;}.parent {width: 600px;height: 200px;margin: 100px;position: absolute;background: green;left: 0px;top: 0px;display: flex;justify-content: space-between;flex-wrap: nowrap;flex-direction: row-reverse;}.parent div{width: 20%;border:1px solid #ccc;background:pink;}</style></head><body><div><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div></div></body></html>
我們?cè)O(shè)置了flex-wrap: nowrap;（不換行，壓縮所有的子元素在一行中顯示），以及flex-direction: row-reverse;（反向排列）
代碼效果如下：
如果設(shè)置為flex-wrap: warp（換行顯示無法在一行顯示的子元素），則效果如下：
如果將flex-direction: column;,則會(huì)縱向排列元素，效果如下圖：
除了上面的這些給伸縮盒子父元素設(shè)置的樣式之外，我們還可以可以伸縮盒子的子元素設(shè)置flex屬性，用來設(shè)置平均分配整個(gè)父盒子的空間。
代碼如下：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>div{box-sizing: border-box;}.parent {width: 600px;height: 200px;margin: 100px;position: absolute;background: green;left: 0px;top: 0px;display: flex;justify-content: space-between;}.parent div{flex:1;width: 20%;border:1px solid #ccc;background:pink;}</style></head><body><div><div>1</div><div>2</div><div>3</div><div>4</div></div></body></html>
效果如下：
如上圖所示，每個(gè)盒子平均分配了父盒子的空間，原本寬度為20%，現(xiàn)在被拉伸了。
除此之外，咱們還可以使用flex屬性進(jìn)行進(jìn)一步的設(shè)置，代碼如下：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>div{box-sizing: border-box;}.parent {width: 600px;height: 200px;margin: 100px;position: absolute;background: green;left: 0px;top: 0px;display: flex;justify-content: space-between;}.parent div:nth-of-type(1){flex:1;border:1px solid #ccc;background:red;}.parent div:nth-of-type(2){flex:2;border:1px solid #ccc;background:green;}.parent div:nth-of-type(3){flex:2;border:1px solid #ccc;background:blue;}.parent div:nth-of-type(4){flex:1;border:1px solid #ccc;background:pink;}</style></head><body><div><div>1</div><div>2</div><div>3</div><div>4</div></div></body></html>
效果如下圖：
我們分別給四個(gè)子盒子設(shè)置了flex:1 , flex:2, flex:2 ,flex:1.
這是什么意思呢？
四個(gè)flex加起來一共是6.那么第一個(gè)盒子就占據(jù)整個(gè)父盒子的1/6寬度。
同理，另外三個(gè)盒子分別占據(jù)2/6,2/6,1/6的寬度，所以就形成了我們現(xiàn)在看到的效果。
原文來源于：黑馬程序員社區(qū)
學(xué)習(xí)資源：
想學(xué)習(xí)css，可以關(guān)注：黑馬程序員頭條號(hào)，后臺(tái)回復(fù)：css
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
