css3 实现icon刷新转动效果的代码_F11 - 专业站长和开发者的学习网站

本站首页收藏本站

广告位联系

APP正在开发中...

返回顶部

分享到

css3 实现icon刷新转动效果的代码

css 来源：互联网作者：佚名发布时间：2025-02-21 22:02:08 人浏览

摘要

先了解一下-webkit-transform、animation、@keyframes这三个属性吧 -webkit-transform可以实现平移、旋转、缩放和倾斜等效果有以下几个属性 translate(x,y):元素平移 rotate(angle): 旋转元素比如0deg到360deg 0度到

先了解一下-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五角星转起来

<div>

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

</div>

</template>

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,

};

</script>

.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>

您可能感兴趣的文章 :

原文链接 :

Tag : CSS3(201)

CSS实现高频出现的复杂怪状按钮之镂空的内凹圆

你可以在这里看到：CodePen Demo -- CSS Various Button Shapes | CSS 各种造型按钮接下来几篇文章中，将在上述基础上，额外补充一些在日常设计稿中
CSS3实现动态旋转加载样式的代码

要使用 CSS3 创建一个动态旋转加载样式，可以使用 CSS 动画和旋转变换。下面是一个简单的示例： HTML： 1 div class=loader/div CSS： 1 2 3 4 5 6 7
CSS3动态效果之过渡属性介绍

过渡CSS3动态效果过渡属性一、什么是过渡：通过 css3 可以在不使用 flash 动画或 javascript 的情况下，为元素从一种样式变换为另一种样式时
css3 实现icon刷新转动效果的代码

先了解一下-webkit-transform、animation、@keyframes这三个属性吧 -webkit-transform可以实现平移、旋转、缩放和倾斜等效果有以下几个属性 translate(x
css3 display:flex 弹性盒模型的使用方法

CSS3 中的display: flex是一种强大的布局模式，被称为弹性盒布局或Flexbox。它允许我们通过一套简洁的规则，轻松地对网页元素进行对齐、排列
CSS3模拟实现一个雷达探测扫描动画特效

之前好长时间住在唐家岭，从路口往上地走的时候，总能看见一个一个的雷达，好壮观，今天用CSS3实现一个雷达探测扫描的效果。 1. 实现思
css实现渐变色圆角边框

渐变色圆角边框(内容区域圆角) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 !DOCTYPE html html lang=en head meta charset=UTF-8 t
css渐变色背景gradient的介绍

使用渐变色作为背景可以直接将渐变色用作元素的背景，可以看做是一种特殊的背景图片。（是作为背景background一个属性值不是背景颜色
CSS3中使用flex和grid实现等高元素布局的代码

一、简单的两列实现 1、先看页面效果 2、css代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 .container { padding: 10px; width: 100ch; margin: 0 auto; box-shadow: i
css grid网格布局(栅格布局)的代码

CSS中gap并不是新的属性，在CSS3新特性中多列布局为其添加了一个新能力。间隙属性除了运用在CSS栅格之外，CSS3新特性中弹性布局同样可以使