大神勿噴，這是小弟自己學習的痕跡。

CSS3動畫效果核心代碼

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 }

?

技術名詞

1.height:auto 與 height: 100%

height:auto，是指根據塊內內容自動調節高度。

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

?

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

z-index是針對網頁顯示中的一個特殊屬性。

因為顯示器是顯示的圖案是一個二維平面，擁有x軸和y軸來表示位置屬性。

為了表示三維立體的概念如顯示元素的上下層的疊加順序引入了z-index屬性來表示z軸的區別。表示一個元素在疊加順序上的上下立體關系。

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

對于未指定此屬性的定位對象，z-index 值為正數的對象會在其之上，而 z-index 值為負數的對象在其之下。

★ 只對定位元素有效

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

用來確定定位元素在垂直于顯示屏方向（稱為Z軸）上的層疊順序，也就是說如果元素是沒有定位的，對其設置的z-index會是無效的。

?

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

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

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

::before跟::after完全類似，只是它插入的內容會出現在其它內容之前。

這兩者的區別可以簡單描述為：

想讓插入的內容出現在其它內容前，使用::before，否者，使用::after。

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

content的值可以為：

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

?

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

　　該屬性值是設置背景圖像的寬度和高度的，第一個值是寬度，第二個值是設置高度的。如果只設置第一個值，那么第二個值會自動轉換為 “auto”;

　　二：percentage

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

　　三：cover （通常用于圖片自適應縮放）

　　把背景圖像擴展至足夠大，以使背景圖像完全覆蓋背景區域。

　　四：contain

　　把圖像擴展至最大尺寸，以使寬度和高度 完全適應內容區域。

實際靜態效果圖如下（圖片引自空中網）

轉載于:https://www.cnblogs.com/tim100/p/6031266.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。