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

posted on 2021-07-30 19:47  完美前端  阅读(736)  评论(0)    收藏  举报

导航