CSS3动画的实例讲解—⽤CSS3实现摩天轮特效
通过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结构，同时引⼊准备好的背景图⽚
css特效文字
通过元素的绝对定位及相对定位，实现元素图⽚覆盖，实现静态图⽚效果
定位背景图及⽀架
在对架⼦上的图⽚进⾏定位，这⾥选取了4个位置
最后定义动画name值为run和childrun的运动，其中run顺时针匀速旋转360度，childrun逆时针旋转360来实现
即可实现摩天轮特效，动效演⽰链接。
此博客写于疫情期间，祝逆战班同学逆战成功。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。