利用纯CSS实现旋转React图标的动画效果

本篇 文章 手把手带大家 利用 纯CSS实现旋转React图标的动画效果， 希望对大家有所帮助 ！

几天前，小包在 code PE n 看到一个 剑气 加载效果，大为惊奇，再次被 CSS 折服。本来想和大家一起实现 剑气 加载，搜索后小包发现小卢大佬实现过，就不再班门弄斧了。

小包是会服气的人吗？of course！

小包绞尽脑汁，想到一个很有 意思 的图案，简直就是剑气 plus 版。

react 图标 ，太绝了，这不就是剑气 plus 吗？ react 给小包动起来*!

项目地址: react动起来

https://zcxiaobao.g IT h ub .io/zc-demos/dis play /reactMoveLoading/index.ht ML

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 -s ize值为72px */
    h ei ght:  VAR (--electron-orbit-size); 
}

设置第二个与第三个椭圆的倾角分别为 60 deg 和 -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);
    m arg in -t op: calc(var(--nucleus-size) / -2);
    mar gin -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 按顺序切换缺失边

@keyfr am es 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(- 360 deg) scale(1);
  }
}

源 码仓库

源码地址: react动起来

https://github .COM /zcxiaobao/zc-demos/blob/m ai n/display/reactMoveLoading/index.html

项目地址: react动起来

https://zcxiaobao.github.io/zc-demos/display/reactMoveLoading/index.html

如果感觉有帮助的话，别忘了给小包点个。

（学习视频分享：css视频教程）

以上就是利用纯CSS实现旋转React图标的动画效果的详细内容，更多请关注其它相关文章！

总结

以上是 为你收集整理的 利用纯CSS实现旋转React图标的动画效果 全部内容，希望文章能够帮你解决 利用纯CSS实现旋转React图标的动画效果 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于利用纯CSS实现旋转React图标的动画效果的详细内容...