如何利用純CSS實現旋轉React圖標的動畫效果

如何利用純CSS實現旋轉React圖標的動畫效果，針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

幾天前，小編在 codepen 看到一個劍氣加載效果，大為驚奇，再次被 CSS 折服。本來想和大家一起實現劍氣加載，搜索后小編發現同事已經實現了。

絞盡腦汁，想到一個很有意思的圖案，簡直就是劍氣plus版。

react 圖標，太絕了，這不就是劍氣plus嗎？react 給小包動起來*!

react圖標繪制

react 圖標大家應該都比較熟悉，由三個同樣大小的橢圓和一個中心圓組成。橢圓和圓使用 border-radius 實現。

• 首先準備三個橢圓和中心圓的 html 結構

<div class="react">
    <div class="electron"></div>
    <div class="electron-alpha"></div>
    <div class="electron-omega"></div>
</div>

• 三個橢圓是相同的，寫一個通用的橢圓樣式，得到三個重疊的橢圓。

.react > [class^="electron"] {
    border: #5ed3f3 solid 2px;
    border-radius: 100%;
    width: 100%;
    /* CSS變量 --electron-orbit-size值為72px */
    height: var(--electron-orbit-size); 
}

• 設置第二個與第三個橢圓的傾角分別為 60deg 和 -60deg

.electron-alpha {
    transform: rotate(60deg);
}
.electron-omega {
    transform: rotate(-60deg);
}

• 使用 react: before 偽元素繪制中心圓，配合絕對定位，將中心圓定位至中心。react 圖標繪制完成。

.react:before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--nucleus-size);
    height: var(--nucleus-size);
    margin-top: calc(var(--nucleus-size) / -2);
    margin-left: calc(var(--nucleus-size) / -2);
    background: var(--electron-color-hex);
}
.react > [class^="electron"] {
    position: absolute;
    top: 50%;
    margin-top: calc(var(--electron-orbit-size) / -2);
}

react圖標動畫設計

天數五十，道衍四九，尚存一線生機，缺失有可能會形成特殊的美。

所以咱們就開始嘗試缺失一部分橢圓，看看是否會形成炫酷的動效？

假設開始狀態為 border-left 缺失，之后按照左下右上順序依次缺失，咱們來一起看一下動畫效果。

• 設置動畫 electron-orbit 按順序切換缺失邊

@keyframes electron-orbit {
  0% {
    border-top: rgba(94, 211, 243, 1) solid 2px;
    border-right: rgba(94, 211, 243, 1) solid 2px;
    border-bottom: rgba(94, 211, 243, 1) solid 2px;
    border-left: rgba(94, 211, 243, 0) solid 2px;
  }
  25% {
    border-top: rgba(94, 211, 243, 1) solid 2px;
    border-right: rgba(94, 211, 243, 1) solid 2px;
    border-bottom: rgba(94, 211, 243, 0) solid 2px;
    border-left: rgba(94, 211, 243, 1) solid 2px;
  }
  50% {
    border-top: rgba(94, 211, 243, 1) solid 1px;
    border-right: rgba(94, 211, 243, 0) solid 2px;
    border-bottom: rgba(94, 211, 243, 1) solid 4px;
    border-left: rgba(94, 211, 243, 1) solid 2px;
  }
  75% {
    border-top: rgba(94, 211, 243, 0) solid 2px;
    border-right: rgba(94, 211, 243, 1) solid 2px;
    border-bottom: rgba(94, 211, 243, 1) solid 2px;
    border-left: rgba(94, 211, 243, 1) solid 2px;
  }
  100% {
    border-top: rgba(94, 211, 243, 1) solid 2px;
    border-right: rgba(94, 211, 243, 1) solid 2px;
    border-bottom: rgba(94, 211, 243, 1) solid 2px;
    border-left: rgba(94, 211, 243, 0) solid 2px;
  }
}

動畫的效果整體還是可以的，但是由于缺失部分為從 0 -> 1，透明度變化太大，導致動畫整體不連貫。

• 降低顯示邊的透明度，分別為 0.5 0.35 0.2 0

降低透明度后，動畫連貫程度提升了很多，但線條感好差，接下來繼續修改線條的粗細。

• 修改線條的粗細，粗細梯度分別為 4px 2px 1px 0px

三個橢圓使用同一個動畫，啟動時間相同，因此動畫節奏保持一致，看起來有幾分僵硬，咱們給每一個橢圓設置獨特的動畫節奏。

• 給每個橢圓設置不同的動畫延遲時間，分別為 1.2s 1s 0.8s

添加小球動畫

只有線條動畫還是有幾分單調，繼續來優化，給缺少部分添加小球，小球隨著缺少部分移動，并且小球還伴有放大縮小效果。

@keyframes electron {
  0% {
    left: calc(var(--electron-size) / -1);
    transform: scale(1);
  }
  12.5% {
    top: 100%;
    transform: scale(1.5);
  }
  25% {
    left: 100%;
    transform: scale(1);
  }
  37.5% {
    top: 0%;
    transform: scale(0.25);
  }
  50% {
    left: calc(var(--electron-size) / -1);
    transform: scale(1);
  }
  62.5% {
    top: 100%;
    transform: scale(1.5);
  }
  75% {
    left: 100%;
    transform: scale(1);
  }
  87.5% {
    top: 0%;
    transform: scale(0.25);
  }
  100% {
    left: calc(var(--electron-size) / -1);
    transform: scale(1);
  }
}

怎么樣，看起來是不是有點東西了，別急，還有最后一步，讓圖標動起來吧。

圖標動起來

給圖標整體添加旋轉和縮小放大動畫，完成最后的 react loading 效果吧

@keyframes react {
  0% {
    transform: rotate(0deg) scale(1);
  }
  12.5% {
    transform: rotate(-45deg) scale(0.9);
  }
  25% {
    transform: rotate(-90deg) scale(1);
  }
  37.5% {
    transform: rotate(-135deg) scale(0.9);
  }
  50% {
    transform: rotate(-180deg) scale(1);
  }
  62.5% {
    transform: rotate(-225deg) scale(0.9);
  }
  75% {
    transform: rotate(-270deg) scale(1);
  }
  87.5% {
    transform: rotate(-315deg) scale(0.9);
  }
  100% {
    transform: rotate(-360deg) scale(1);
  }
}

關于如何利用純CSS實現旋轉React圖標的動畫效果問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業資訊頻道了解更多相關知識。