您现在的位置是:主页 > Web前端技术 > Web前端技术

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

IDCBT2022-01-06服务器技术人已围观

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

          标签:

          很赞哦! ()

本栏推荐