您现在的位置是:主页 > 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); }标签:很赞哦! ()