如何利用纯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);
}

        
转载：感谢您对IDCBT博客网站平台的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人站长或者朋友圈，但转载请说明文章出处“来源IDCBT博客”。
        标签：
        
很赞哦！ ()