這篇文章手把手帶大家利用純CSS實現旋轉React圖示的動畫效果，希望對大家有幫助！
幾天前，小包在codepen 看到一個劍氣載入效果，大為驚奇，再一次被CSS 折服。本來想和大家一起實現劍氣加載，搜尋後小包發現小盧大佬實現過，就不再班門弄斧了。
小包是會服氣的人嗎？ of course！
小包絞盡腦汁，想到一個很有趣的圖案，簡直就是劍氣plus版。
react 圖示，太絕了，這不就是劍氣plus嗎？ react 給小包動起來*!
#專案位址: react 動起來
https://zcxiaobao.github .io/zc-demos/display/reactMoveLoading/index.html
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);
}
天數五十，道衍四九，尚存一線生機，缺失有可能會形成特殊的美。
所以咱們就開始嘗試缺少一部分橢圓，看看是否會形成酷炫的動效？
假設開始狀態為 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);
}
}原始碼位址: react動起來
#https://github.com/zcxiaobao/zc-demos/blob/main/display/reactMoveLoading/index .html
專案位址: react動起來
https://zcxiaobao.github.io/zc-demos/display/reactMoveLoading/index.html
#如果感覺有幫助的話，別忘了給小包點個。
（學習影片分享：css影片教學）
以上是利用純CSS實現旋轉React圖示的動畫效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！
