大神勿噴，這是小弟自己學(xué)習(xí)的痕跡。

CSS3動(dòng)畫(huà)效果核心代碼

1 @keyframes slideLeft { 2 0% { 3 left: -500px; 4 } 5 100% { 6 left: 0; 7 } 8 } 9 @keyframes slideBottom { 10 0% { 11 top: 350px; 12 } 13 100% { 14 top: 0; 15 } 16 } 17 @keyframes zoomIn { 18 0% { 19 transform: scale(0.1); 20 } 21 100% { 22 transform: none; 23 } 24 } 25 @keyframes rotate { 26 0% { 27 transform: rotate(-360deg) scale(0.1); 28 } 29 100% { 30 transform: none; 31 } 32 }

?

技術(shù)名詞

1.height:auto 與 height: 100%

height:auto，是指根據(jù)塊內(nèi)內(nèi)容自動(dòng)調(diào)節(jié)高度。

height:100%，是指其相對(duì)父塊高度而定義的高度，也就是按照離它最近且有定義高度的父層的高度來(lái)定義高度。

?

2. z-index （參考自?http://www.cnblogs.com/dolphinX/p/3262469.html）

z-index是針對(duì)網(wǎng)頁(yè)顯示中的一個(gè)特殊屬性。

因?yàn)轱@示器是顯示的圖案是一個(gè)二維平面，擁有x軸和y軸來(lái)表示位置屬性。

為了表示三維立體的概念如顯示元素的上下層的疊加順序引入了z-index屬性來(lái)表示z軸的區(qū)別。表示一個(gè)元素在疊加順序上的上下立體關(guān)系。

z-index值 較大 的元素將疊加在z-index值 較小 的元素之上。

對(duì)于未指定此屬性的定位對(duì)象，z-index 值為正數(shù)的對(duì)象會(huì)在其之上，而 z-index 值為負(fù)數(shù)的對(duì)象在其之下。

★ 只對(duì)定位元素有效

z-index屬性適用于定位元素（position屬性值為 relative 或 absolute 或 fixed的對(duì)象），

用來(lái)確定定位元素在垂直于顯示屏方向（稱為Z軸）上的層疊順序，也就是說(shuō)如果元素是沒(méi)有定位的，對(duì)其設(shè)置的z-index會(huì)是無(wú)效的。

?

3.偽元素 ::after 和 ::before

::after是一個(gè)CSS偽元素，使用::after，你可以從CSS里往頁(yè)面上新增內(nèi)容(不再要在HTML里有相應(yīng)的東西)。

雖然最終生成的東西并不是真正的DOM里的內(nèi)容，但這些內(nèi)容能像普通內(nèi)容一樣顯示

::before跟::after完全類似，只是它插入的內(nèi)容會(huì)出現(xiàn)在其它內(nèi)容之前。

這兩者的區(qū)別可以簡(jiǎn)單描述為：

想讓插入的內(nèi)容出現(xiàn)在其它內(nèi)容前，使用::before，否者，使用::after。

在代碼順序上，::after生成的內(nèi)容也比::before生成的內(nèi)容靠后。如果按堆棧視角，::after生成的內(nèi)容會(huì)在::before生成的內(nèi)容之上。

content的值可以為：

　　字符串： content: "字符串"; – 特殊字符串需要轉(zhuǎn)義或unicode編碼。
　　圖片：content: url(/path/to/image.jpg); – 圖片會(huì)按原尺寸大小的插入，不能改變，因?yàn)闈u變色實(shí)際上也是圖像，所以，這些偽元素里也可以使用漸變色。
　　空： content: ""; – 可以用于清除左右浮動(dòng)元素，也能夠用于使用背景圖片(這是可以設(shè)置高和寬，甚至使用background-size。)
　　計(jì)數(shù)器： content: counter(li); – 在列表時(shí)計(jì)算行數(shù)非常方便。
　　需要注意的是，你不能用它們插入HTML(至少這些HTML代碼會(huì)被轉(zhuǎn)義輸出)。content: "<h1>nope</h1>";

?

4.background-size: length | percentage | cover | contain;
　　一：length

　　該屬性值是設(shè)置背景圖像的寬度和高度的，第一個(gè)值是寬度，第二個(gè)值是設(shè)置高度的。如果只設(shè)置第一個(gè)值，那么第二個(gè)值會(huì)自動(dòng)轉(zhuǎn)換為 “auto”;

　　二：percentage

　　該屬性是以父元素的百分比來(lái)設(shè)置圖片的寬度和高度的，第一個(gè)值是寬度，第二個(gè)值是高度。如果只設(shè)置一個(gè)值，那么第二個(gè)值會(huì)被設(shè)置為 “auto”;

　　三：cover （通常用于圖片自適應(yīng)縮放）

　　把背景圖像擴(kuò)展至足夠大，以使背景圖像完全覆蓋背景區(qū)域。

　　四：contain

　　把圖像擴(kuò)展至最大尺寸，以使寬度和高度 完全適應(yīng)內(nèi)容區(qū)域。

實(shí)際靜態(tài)效果圖如下（圖片引自空中網(wǎng)）

轉(zhuǎn)載于:https://www.cnblogs.com/tim100/p/6031266.html

總結(jié)

以上是生活随笔為你收集整理的CSS3幻灯片制作心得的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。