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

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

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: 指定動畫的持續(xù)時間，單位為秒(s)或毫秒(ms)。
• timing-function: 指定動畫的時間函數，用于控制動畫的速度變化。常見的值有 ease、linear、ease-in、ease-out、ease-in-out 等。
• delay: 指定動畫的延遲時間，即動畫開始執(zhí)行前的等待時間，單位為秒(s)或毫秒(ms)。iteration-count: 指定動畫的重復次數，可以是一個正整數，也可以是 infinite 表示無限循環(huán)。
• direction: 指定動畫播放的方向，可以是 normal（正向播放）、reverse（反向播放）、alternate（交替正反向播放）、alternate-reverse（交替反正向播放）。
• fill-mode: 指定動畫執(zhí)行前和執(zhí)行后的樣式，可以是 none、forwards、backwards、both。
• play-state: 指定動畫的播放狀態(tài)，可以是 running（運行）或 paused（暫停）。

 @keyframes 定義動畫的關鍵幀的 比如 想初始狀態(tài) 過度到中間時 結束時 幾個時間段不同的動畫狀態(tài)

常見 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) }
? }

 簡單寫個例子吧 就一個加載的狀態(tài)

讓這個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 實現(xiàn)icon刷新轉動的文章就介紹到這了,更多相關css3 icon刷新轉動內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！

最新評論