統Web設計開發過程中，動畫效果主要借助flash動畫制作工具實現動畫的制作。隨著JS技術尤其是JQuery技術的出現，Web開發人員可以借助JS或者JQuery技術實現各類Web動畫的開發。除此之外在HTML5+CSS3技術下可直接借助CSS3技術實現簡單動畫的制作。本文以風車旋轉效果實現為例，對CSS3動畫制作進行簡單分析與說明。首先給出最終實現效果，如下圖所示：

CSS3編寫旋轉風車效果如上圖所示，本例子主要涉及CSS3屬性包括CSS3動畫屬性與CSS3 2D轉換屬性。其中2D屬性轉換主要用于實現對圖片進行旋轉操作，動畫屬性主要用于實現動畫控制功能。所需屬性分別描述如下：

1、CSS3 2D 轉換

通過 CSS3 transform屬性，我們能夠對元素進行移動、縮放、轉動、拉長或拉伸。我們例子中主要使用到元素的旋轉方法rotate()，通過 rotate() 方法，元素順時針旋轉給定的角度。rotate方法參數為旋轉度數，一般用deg表示，如30°為30deg。

2、CSS3 動畫

動畫主要是指指定元素從一個狀態轉移到另一個狀態，CSS提供@keyframes 規則用于實現對狀態的定義，通過@keyframes關鍵幀設置，最終可以實現動畫效果。規則編寫好之后需要使用animation屬性，將動畫規則綁定到對應元素上。animation主要屬性值包括規則名稱、執行時間及執行次數。寫法如下：

animation:mymove 5s infinite;//mymove為規則名稱 infinite表示重復執行
@keyframes mymove{...}//規則編寫

明確旋轉風車所需CSS3屬性之后可以選擇風車素材進行Web頁面設計，本例風車素材主要包括葉片部分與手柄部分。素材如下圖：

使用以上素材結合HTML5頁面編碼技術及DIV布局技術等，可以完成頁面的設計與開發，本例#nam為葉片樣式，hanlde為手柄樣式，均使用層布局，設置div背景為素材圖片。使用animation keyframes等進行動畫設計。本例核心CSS樣式文件代碼如下：

以上通過簡單例子給出了純CSS3實現動畫效果核心屬性，歸納核心屬性主要包括animation與transform兩屬性。如需完整頁面代碼或有問題討論，請關注后私信作者。

本頭條號長期關注于青少年編程資訊分享；編程課程、素材、代碼分享及青少年編程培訓。如果您對以上方面有興趣，可關注該頭條號，如有編程學習問題可以聯系作者，共同探討。

果您需要反轉數組元素的順序，可以使用數組方法reverse()?，如下所示：

修改原始數組

需要注意的一點是它會改變原始數組。

如何在不改變原始數組的情況下反轉數組

以下是一些不會改變原始數組的做法。我們來看看

1. 使用 slice 和 reverse

2. 使用 ...擴展運算符 和 reverse

3. 使用 reduce 和 ...擴展運算符

4. 使用 reduceRight 和 ...擴展運算符

5. 或者使用push

相關文章：

使用Array.isArray更好地檢查數組

JS擴展運算符(Spread Operator)的5種用法

如何使用ES6語法給數組去重

參考資源：

• MDN Web Docs: reverse
• w3schools: reverse
• Stack Overflow: Reverse array in Javascript without mutating original array

迎來到我的CSS3專題系列文章，更多精彩內容持續更新中，歡迎關注 ：)

CSS3 3D在大多的項目中應用還是挺廣泛的，今天我將繼續為大家分享一個新的3D交互效果。

本章目標

1. css3 3D實戰
2. css3倒影
3. css3 關鍵幀動畫

先來看我們今天要實現的效果吧！看似好復雜，1招教你搞定它，沒錯，就是通過關鍵幀動畫來搞，我們一步步的來分析看

css3 3D實戰

老規矩，先布局，這個就比較簡單了。一個容器里面放N個div，依次絕對定位，使其所有的圖片疊在一起！

然后讓它們的父級設置為3D空間，并設置景深。

值得注意的是，不要忘了設置旋轉基點為底部。

絕對定位后，我們還要設置每一張圖片的層級，倒序

css3倒影

從gif圖中可以看出來。每張圖片都會有一個倒影的效果。在CSS3中我們是采用的box-reflect來實現倒影效果

box-reflect：none | <direction> <offset>? <mask-box-image>

第一個參數為：我們要設置的倒影的方向，它的取值有：

• above:表示生成的倒影在對象（原圖）的上方；
• below:表示生成的倒影在對象（原圖）的下方；
• left:表示生成的倒影在對象(原圖)的左側；
• right:表示生成的倒影在對象(原圖)的右側；

第二個參數offset是用來設置生成倒影與對象（原圖）之間的間距，其取值可以是固定的像素值，也可以是百分比值

第三個參數是用來設置倒影的遮罩效果，可以是背景圖片，也可以是漸變生成的背景圖像

來看一個示例：

注意：box-reflect屬性并不是一個標準的css3屬性，所以我們需要加上webkit內核前綴。不加的話，效果出不來。

css3 關鍵幀動畫

圖中的動畫效果我是采用的CSS3的幀動畫來完成的，我們先來看看幀動畫的語法。

要想使用幀動畫，首先我們得先定義一個動畫幀，我們通過@keyframes關鍵字來定義它

語法：

@kyeframes 動畫名稱{
 0%{
 ...
 }
 10%{
 }
 100%{
 //..
 }
}

我們在動畫幀函數里面可以精準的定義動畫的每一幀的變化情況。我們可以使用百分比的形式，也可以使用關鍵字，from to

定義完成后，我們可以在元素身上設置動畫相關的屬性

animation:動畫名稱 動畫時間 延遲時間 動畫運動形式 ...

我們先來實現一個簡單的demo看看

運動一次，運動完成后，又回到了第一幀，一般來說，我們希望它停留在動畫的最后一幀。我們一般在animation上再加一個forwards即可。

終極效果分析

當我們點擊下一張的時候，當前的圖片向前翻轉消失，下一張出現，所以我們需要定義兩個幀動畫效果。

當下一張圖片出現后，圖片本身一個輕微的振動效果，這里我們也是通過多定義幾個動畫幀來實現的具體的代碼如下：

最后我們來實現點擊的邏輯。當我們點擊下一張的時候，我們需要將當前的一張的動畫設置成hide,下一張圖片設置成show

這里我使用的是iNow變量來表示當前是第幾張圖片。

效果完成。

總結：

1. css3的可以實現倒影的效果，但是記得要加上-webkit-前綴
2. 幀動畫的基礎語法。
3. css3幀動畫可以實現比transition更為復雜的動畫效果,如此這個示例拿transition來做，可能就比較麻煩了。

這里是【暢哥聊技術】CSS3專題的系列文章，更多精彩內容持續更新中……

未完待續。。。