纯CSS实现React Logo图形，内含详细解析
以上是将要实现的效果，Javascript框架React的Logo图形，首先我们来拆解下，它包括三个交叉的椭圆和中间一个圆点，所以我们Html元素可以用以下代码实现：
<div class="main"><div class="ellipse ellipse1"></div><div class="ellipse ellipse2"></div><div class="ellipse ellipse3"></div><div class="ball"></div></div>
整个logo图形的外层以main类包裹，里面的ellipse类元素表示椭圆，最下面的类名ball表示中间的圆点
首先我们让整个logo图形水平垂直居中
.main {height: 100vh;display: flex;justify-content: center;align-items: center;position: relative;}
然后我们给类名ellipse元素（及椭圆）添加样式，很容易想到椭圆是由一个长方形通过设置圆角而来
.ellipse {height: 12vw;width: 4vw;border-radius: 50%;border: 0.6vw solid #5ed3f3;position: absolute;}
由于设置了绝对定位，三个椭圆重叠在了一起
我们接下来需要做的是让这三个椭圆分离交叉，让它们分别以自己的中心旋转一定的角度，分别旋转30°，-30°，90°
.ellipse1 {transform: rotate(30deg);}.ellipse2 {transform: rotate(-30deg);}.ellipse3 {transform: rotate(90deg);}
最后还缺中间的一个实心圆点，位置居中，简单
.ball {position: absolute;width: 2.5vw;height: 2.5vw;border-radius: 50%;background-color: #5ed3f3;}
最后定义一个旋转的动画
@keyframes roll {from {transform:rotate(0deg)}to {transform:rotate(360deg)}}
给main元素增加一个animation动画，旋转一周的持续时间是15s，延迟0.5s执行，周期是无限循环
.main {animation: roll 15s linear 0.5s infinite;}
其实很多的logo完全可以用CSS写出来，就没有必要用图片代替了，这样既省了网页的加载压力，而且还是矢量的不用担心糊的问题。
注：关注公众号“太空编程”，回复 css揭秘，即可获取优质CSS学习资料