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>

到此这篇关于css3 实现icon刷新转动的文章就介绍到这了,更多相关css3 icon刷新转动内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

最新评论