以上是将要实现的效果，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学习资料