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

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

成都创新互联公司专注于临翔网站建设服务及定制,我们拥有丰富的企业做网站经验。 热诚为您提供临翔营销型网站建设,临翔网站制作、临翔网页设计、临翔网站官网定制、微信小程序开发服务,打造临翔网络公司原创品牌,更为您提供临翔网站排名全网营销落地服务。

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

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

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

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

react图标绘制

react 图标大家应该都比较熟悉,由三个同样大小的椭圆和一个中心圆组成。椭圆和圆使用 border-radius 实现。

  • 首先准备三个椭圆和中心圆的 html 结构


    
    
    
.react > [class^="electron"] {
    border: #5ed3f3 solid 2px;
    border-radius: 100%;
    width: 100%;
    /* CSS变量 --electron-orbit-size值为72px */
    height: var(--electron-orbit-size); 
}

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

.electron-alpha {
    transform: rotate(60deg);
}
.electron-omega {
    transform: rotate(-60deg);
}
.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);
}

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

react图标动画设计

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

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

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

@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,透明度变化太大,导致动画整体不连贯。

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

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

添加小球动画

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

@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);
  }
}

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

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

图标动起来

给图标整体添加旋转和缩小放大动画,完成最后的 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);
  }
}

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


当前题目:如何利用纯CSS实现旋转React图标的动画效果
当前地址:http://scyanting.com/article/jhseep.html

其他资讯