精准传达 • 有效沟通
从品牌网站建设到网络营销策划，从策略到执行的一站式服务
如何利用纯CSS实现旋转React图标的动画效果
如何利用纯CSS实现旋转React图标的动画效果，针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
成都创新互联公司专注于临翔网站建设服务及定制，我们拥有丰富的企业做网站经验。 热诚为您提供临翔营销型网站建设，临翔网站制作、临翔网页设计、临翔网站官网定制、微信小程序开发服务，打造临翔网络公司原创品牌,更为您提供临翔网站排名全网营销落地服务。
几天前，小编在 codepen 看到一个剑气加载效果，大为惊奇，再次被 CSS 折服。本来想和大家一起实现剑气加载，搜索后小编发现同事已经实现了。
绞尽脑汁，想到一个很有意思的图案，简直就是剑气plus版。
react 图标，太绝了，这不就是剑气plus吗？react 给小包动起来*!
react图标绘制
react 图标大家应该都比较熟悉，由三个同样大小的椭圆和一个中心圆组成。椭圆和圆使用 border-radius 实现。
.react > [class^="electron"] {
border: #5ed3f3 solid 2px;
border-radius: 100%;
width: 100%;
/* CSS变量 --electron-orbit-size值为72px */
height: var(--electron-orbit-size);
}
.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);
}
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);
}
}
怎么样，看起来是不是有点东西了，别急，还有最后一步，让图标动起来吧。
图标动起来
给图标整体添加旋转和缩小放大动画，完成最后的 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://www.cdkjz.cn/article/jhseep.html
