通過CSS中的animation屬性來實現摩天輪旋轉的動態效果。在開始之前，先說下animation屬性，原理是逐幀動畫，通過關鍵幀控制動畫的每一步，來實現最終的動態效果。
而常用到的幾個屬性分別是：
1.animation-name，設置元素動畫的名字，自定義即可
2.animation-duration，整個動畫的持續時間
3.animation-delay，動畫的延遲時間
4.animation-iteration-count，動畫的重復次數，在默認值情況下，值為1，如果取值為infinite，則動畫無限次播放
5.animation-timing-function,動畫的運動函數形式，取值為liner等
6.animation-direction，定義元素輪流播放方向，默認值為normal，動畫從0%運動到100%停止；取值為reverse，動畫反向運動，由100%到0%；alternate，運動方式一次正向，一次反向。
關鍵幀的設置：
@keyframes name {
0%{}
100%{}
}
其中，0%定義動畫開始運動樣式，100%定義動畫結束樣式，可以添加多個運動位置，如25%等。
摩天輪特效，即通過定義元素0度360度的勻速旋轉來實現的。
首先，構建Html結構，同時引入准備好的背景圖片
通過元素的絕對定位及相對定位，實現元素圖片覆蓋，實現靜態圖片效果
定位背景圖及支架
在對架子上的圖片進行定位，這里選取了4個位置
最后定義動畫name值為run和childrun的運動，其中run順時針勻速旋轉360度，childrun逆時針旋轉360來實現
即可實現摩天輪特效，動效演示鏈接https://www.17sucai.com/pins/demo-show?id=21176。
此博客寫於疫情期間，祝逆戰班同學逆戰成功。