css3 实现icon刷新转动

正在画图的小瓶盖

于 2024-04-29 16:11:31 发布

阅读量992

点赞数 5

文章标签： css3 前端 css

本文链接：https://blog.youkuaiyun.com/sdybz11zr/article/details/138315008

版权

先了解一下-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>