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度旋转。