先了解一下-webkit-transform、animation、@keyframes這三個(gè)屬性吧

-webkit-transform 可以實(shí)現(xiàn)平移、旋轉(zhuǎn)、縮放和傾斜等效果 有以下幾個(gè)屬性

translate(x,y) :元素平移

rotate(angle): 旋轉(zhuǎn)元素 比如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: 指定動(dòng)畫(huà)的名稱(chēng)，對(duì)應(yīng) @keyframes 中定義的動(dòng)畫(huà)關(guān)鍵幀的名稱(chēng)。
• duration: 指定動(dòng)畫(huà)的持續(xù)時(shí)間，單位為秒(s)或毫秒(ms)。
• timing-function: 指定動(dòng)畫(huà)的時(shí)間函數(shù)，用于控制動(dòng)畫(huà)的速度變化。常見(jiàn)的值有 ease、linear、ease-in、ease-out、ease-in-out 等。
• delay: 指定動(dòng)畫(huà)的延遲時(shí)間，即動(dòng)畫(huà)開(kāi)始執(zhí)行前的等待時(shí)間，單位為秒(s)或毫秒(ms)。iteration-count: 指定動(dòng)畫(huà)的重復(fù)次數(shù)，可以是一個(gè)正整數(shù)，也可以是 infinite 表示無(wú)限循環(huán)。
• direction: 指定動(dòng)畫(huà)播放的方向，可以是 normal（正向播放）、reverse（反向播放）、alternate（交替正反向播放）、alternate-reverse（交替反正向播放）。
• fill-mode: 指定動(dòng)畫(huà)執(zhí)行前和執(zhí)行后的樣式，可以是 none、forwards、backwards、both。
• play-state: 指定動(dòng)畫(huà)的播放狀態(tài)，可以是 running（運(yùn)行）或 paused（暫停）。

 @keyframes 定義動(dòng)畫(huà)的關(guān)鍵幀的 比如 想初始狀態(tài) 過(guò)度到中間時(shí) 結(jié)束時(shí) 幾個(gè)時(shí)間段不同的動(dòng)畫(huà)狀態(tài)

常見(jiàn) 0% 、50%、100%

30%時(shí)旋轉(zhuǎn)到100度 ，50%時(shí)旋轉(zhuǎn)到180度 ........ rotates是這個(gè)動(dòng)畫(huà)的名字 

@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) }
? }

 簡(jiǎn)單寫(xiě)個(gè)例子吧 就一個(gè)加載的狀態(tài)

讓這個(gè)element組件的icon五角星轉(zhuǎn)起來(lái)

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

到此這篇關(guān)于css3 實(shí)現(xiàn)icon刷新轉(zhuǎn)動(dòng)的文章就介紹到這了,更多相關(guān)css3 icon刷新轉(zhuǎn)動(dòng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評(píng)論