用css3實現摩天輪旋轉的動畫效果
1.CSS3 @keyframes 規則
如需在 CSS3 中創建動畫，您需要學習 @keyframes 規則。
@keyframes 規則用於創建動畫。在 @keyframes 中規定某項 CSS 樣式，就能創建由當前樣式逐漸改為新樣式的動畫效果。
2.什么是 CSS3 中的動畫
動畫是使元素從一種樣式逐漸變化為另一種樣式的效果。
您可以改變任意多的樣式任意多的次數。
請用百分比來規定變化發生的時間，或用關鍵詞 “from” 和 “to”，等同於 0% 和 100%。
0% 是動畫的開始，100% 是動畫的完成。
為了得到最佳的瀏覽器支持，您應該始終定義 0% 和 100% 選擇器
3.摩天輪旋轉動畫的下實現過程
- 分析摩天輪的構造，有靜止部分和非靜止部分，我把靜止與非靜止分別加在兩個div中。
- 創建靜止部分div並導入圖片如圖下:
- 創建非靜止部分div並導入圖片如圖下:
- 加入背景
- 給靜止圖調至適當位置並設置層級
- 分析動圖中大轉盤順時針轉動，人物要相對與地面始終垂直則人物要逆時針旋轉同一角度
- 給大轉輪加入動畫並旋轉
- 給人物加入動畫旋轉角度為逆時針
- 實現效果圖
4.實現心得 - 在效果實現中簡單運用了@keyframes 規則，簡單使用動畫 animation 屬性進行創建動畫，對於我這個只學習了兩個多星期的小白來說能簡單實現這樣的動畫已經很不錯了嘿嘿/>.<//! 也希望在逆戰班能繼續不斷的努力學習！加油吧