css3 实现icon刷新转动

先了解一下-webkit-transform、animation、@keyframes这三个属性吧

-webkit-transform 可以实现平移、旋转、缩放和倾斜等效果 有以下几个属性

translate(x,y) :元素平移

rotate(angle): 旋转元素 比如0deg到360deg 0度到360度

scale(x,y):缩放元素 x,y分别表示水平和垂直方向的缩放比例

skew(x-angle,y-angle) :倾斜元素，分别表示水平和垂直方向的倾斜角度

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

• name: 指定动画的名称，对应 @keyframes 中定义的动画关键帧的名称。
• duration: 指定动画的持续时间，单位为秒(s)或毫秒(ms)。
• timing-function: 指定动画的时间函数，用于控制动画的速度变化。常见的值有 ease、linear、ease-in、ease-out、ease-in-out 等。
• delay: 指定动画的延迟时间，即动画开始执行前的等待时间，单位为秒(s)或毫秒(ms)。
• iteration-count: 指定动画的重复次数，可以是一个正整数，也可以是 infinite 表示无限循环。
• direction: 指定动画播放的方向，可以是 normal（正向播放）、reverse（反向播放）、alternate（交替正反向播放）、alternate-reverse（交替反正向播放）。
• fill-mode: 指定动画执行前和执行后的样式，可以是 none、forwards、backwards、both。
• play-state: 指定动画的播放状态，可以是 running（运行）或 paused（暂停）。

 @keyframes 定义动画的关键帧的 比如 想初始状态 过度到中间时 结束时 几个时间段不同的动画状态

常见 0% 、50%、100%

30%时旋转到100度 ，50%时旋转到180度 ........ rotates是这个动画的名字

  @keyframes rotates {

    0% { -webkit-transform: rotate(0deg) }

    30% { -webkit-transform: rotate(100deg) }

    50% { -webkit-transform: rotate(180deg) }

    70% { -webkit-transform: rotate(270deg) }

    100% {-webkit-transform: rotate(360deg) }

  }

 简单写个例子吧 就一个加载的状态

让这个element组件的icon五角星转起来

<template>
  <div>
    <el-icon :size="29" :class="{'refresh-loading':isRefresh}" @click="loading"><StarFilled /></el-icon>
  </div>
</template>

<script>
import { StarFilled } from "@element-plus/icons-vue";
import { ref } from "vue";

export default {
  setup() {
    const isRefresh = ref(false)
    const loading = ()=>{
        isRefresh.value = !isRefresh.value
    }
    return {
      isRefresh,
      loading
    };
  },
};
</script>
<style lang="less">
  .refresh-loading{
    animation: rotates 1s linear infinite;

  }
  @keyframes rotates {
    0% { -webkit-transform: rotate(0deg) }
    30% { -webkit-transform: rotate(100deg) }
    50% { -webkit-transform: rotate(180deg) }
    70% { -webkit-transform: rotate(270deg) }
    100% {-webkit-transform: rotate(360deg) }
  }

</style>