css 旋转动画
#### CSS3 动画实现旋转加载图标
旋转加载动画样式
/* 定义一个类名为.uni-load-more__img的元素样式 */ .uni-load-more__img { /* 设置该元素的动画名称为loading-ios-H5,持续时间为1秒,延迟时间为0秒,动画计时函数为step-end,动画播放次数为无限次 */ animation: loading-ios-H5 1s 0s step-end infinite; }
关键帧动画
/* 定义名为loading-ios-H5的关键帧动画 */ @keyframes loading-ios-H5 { /* 在动画开始时(0%),将元素旋转0度 */ 0% { transform: rotate(0deg); } /* 在动画的8%时,将元素旋转30度 */ 8% { transform: rotate(30deg); } /* ... 后续关键帧持续类似操作 ... */ /* 在动画结束时(100%),将元素旋转360度 */ 100% { transform: rotate(360deg); } }代码通过CSS3的关键帧动画实现了一个旋转加载的效果。当元素应用`.uni-load-more__img`类时,它会持续旋转,每隔一段时间(由关键帧的百分比决定)旋转一个固定的角度,直到完成一个完整的360度旋转。