我要评论先了解一下-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刷新转动内容请搜索代码网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持代码网！
发表评论