温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

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

发布时间:2022-01-06 11:09:22 阅读:166 作者:柒染 栏目:web开发
前端开发者测试专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

如何利用纯CSS实现旋转React图标的动画效果,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

几天前,小编在 codepen 看到一个剑气加载效果,大为惊奇,再次被 CSS 折服。本来想和大家一起实现剑气加载,搜索后小编发现同事已经实现了。

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

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

如何利用纯CSS实现旋转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-radius100%;
    width100%;
    /* CSS变量 --electron-orbit-size值为72px */
    heightvar(--electron-orbit-size); 
}

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

  • 设置第二个与第三个椭圆的倾角分别为 60deg-60deg

.electron-alpha {
    transformrotate(60deg);
}
.electron-omega {
    transformrotate(-60deg);
}
  • 使用 react: before 伪元素绘制中心圆,配合绝对定位,将中心圆定位至中心。react 图标绘制完成。

.react:before {
    position: absolute;
    top50%;
    left50%;
    widthvar(--nucleus-size);
    heightvar(--nucleus-size);
    margin-topcalc(var(--nucleus-size) / -2);
    margin-leftcalc(var(--nucleus-size) / -2);
    backgroundvar(--electron-color-hex);
}
.react > [class^="electron"] {
    position: absolute;
    top50%;
    margin-topcalc(var(--electron-orbit-size) / -2);
}

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

react图标动画设计

天数五十,道衍四九,尚存一线生机,缺失有可能会形成特殊的美。

所以咱们就开始尝试缺失一部分椭圆,看看是否会形成炫酷的动效?

假设开始状态为 border-left 缺失,之后按照左下右上顺序依次缺失,咱们来一起看一下动画效果。

  • 设置动画 electron-orbit 按顺序切换缺失边

@keyframes electron-orbit {
  0% {
    border-toprgba(942112431) solid 2px;
    border-rightrgba(942112431) solid 2px;
    border-bottomrgba(942112431) solid 2px;
    border-leftrgba(942112430) solid 2px;
  }
  25% {
    border-toprgba(942112431) solid 2px;
    border-rightrgba(942112431) solid 2px;
    border-bottomrgba(942112430) solid 2px;
    border-leftrgba(942112431) solid 2px;
  }
  50% {
    border-toprgba(942112431) solid 1px;
    border-rightrgba(942112430) solid 2px;
    border-bottomrgba(942112431) solid 4px;
    border-leftrgba(942112431) solid 2px;
  }
  75% {
    border-toprgba(942112430) solid 2px;
    border-rightrgba(942112431) solid 2px;
    border-bottomrgba(942112431) solid 2px;
    border-leftrgba(942112431) solid 2px;
  }
  100% {
    border-toprgba(942112431) solid 2px;
    border-rightrgba(942112431) solid 2px;
    border-bottomrgba(942112431) solid 2px;
    border-leftrgba(942112430) solid 2px;
  }
}

动画的效果整体还是可以的,但是由于缺失部分为从 0 -> 1,透明度变化太大,导致动画整体不连贯。

  • 降低显示边的透明度,分别为 0.5 0.35 0.2 0

降低透明度后,动画连贯程度提升了很多,但线条感好差,接下来继续修改线条的粗细。

  • 修改线条的粗细,粗细梯度分别为 4px 2px 1px 0px

三个椭圆使用同一个动画,启动时间相同,因此动画节奏保持一致,看起来有几分僵硬,咱们给每一个椭圆设置独特的动画节奏。

  • 给每个椭圆设置不同的动画延迟时间,分别为 1.2s 1s 0.8s

添加小球动画

只有线条动画还是有几分单调,继续来优化,给缺少部分添加小球,小球随着缺少部分移动,并且小球还伴有放大缩小效果。

@keyframes electron {
  0% {
    leftcalc(var(--electron-size) / -1);
    transformscale(1);
  }
  12.5% {
    top100%;
    transformscale(1.5);
  }
  25% {
    left100%;
    transformscale(1);
  }
  37.5% {
    top0%;
    transformscale(0.25);
  }
  50% {
    leftcalc(var(--electron-size) / -1);
    transformscale(1);
  }
  62.5% {
    top100%;
    transformscale(1.5);
  }
  75% {
    left100%;
    transformscale(1);
  }
  87.5% {
    top0%;
    transformscale(0.25);
  }
  100% {
    leftcalc(var(--electron-size) / -1);
    transformscale(1);
  }
}

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

怎么样,看起来是不是有点东西了,别急,还有最后一步,让图标动起来吧。

图标动起来

给图标整体添加旋转和缩小放大动画,完成最后的 react loading 效果吧

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

关于如何利用纯CSS实现旋转React图标的动画效果问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注亿速云行业资讯频道了解更多相关知识。

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI

开发者交流群×