纯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学习资料