react logo 出场动画

先看效果

可以点击右下角的 Rerun 按钮重新播放动画.

制作过程

DOM 的部分

构成的元素有 一个圆点, 三个圆环

<div class="container">
  <div class="box">
    <span class="point"></span>
    <span class="ring-1"></span>
    <span class="ring-2"></span>
    <span class="ring-3"></span>
  </div>
</div>

css 的部分

由于元素之间会叠在一起, 所以使用定位的方式去居中, 而没有使用flex布局.

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #282c34;
  overflow: hidden;
}

.box {
  position: relative;
  width: 400px;
  height: 400px;
  animation: box-animate 10s linear infinite;
}

.point {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 15%;
  height: 15%;
  border-radius: 50%;
  background-color: #61dafb;
  transform: translate(-50%, -50%) scale(0);
  animation: point-animate 0.75s ease 1s forwards;
}

[class^="ring-"] {
  position: absolute;
  top: 50%;
  left: 50%;

  border-radius: 50%;
  border: 4px solid transparent;
}

绘制椭圆

可以先绘制一个圆形,然后通过transform: rotateY(70deg)旋转这个圆, 相当于看到了圆的侧视图, 这样看起来就会是一个椭圆.

.ring {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  border: 1px solid #000;
  transform: rotateY(70deg);
}

然后每个椭圆的环会把圆平分成 6 份, 所以使用rotateZ()来分别旋转椭圆, 角度则是index * (360/6) + 30, 30度为基础偏移角度. 最后加上平移, 让圆环居中于屏幕.

.ring-1 {
  transform: translate(-50%, -50%) rotateZ(30deg) rotateY(70deg);
}
.ring-2 {
  transform: translate(-50%, -50%) rotateZ(90deg) rotateY(70deg);
}
.ring-3 {
  transform: translate(-50%, -50%) rotateZ(150deg) rotateY(70deg);
}

动画的部分

中间的圆点先放大,然后恢复到 100%,让它看起来'Q 弹'.

@keyframes point-animate {
  0% {
    transform: translate(-50%, -50%) scale(0);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}

然后,每个圆环先是逐渐放大,然后变成椭圆,并旋转相对于的角度.

@keyframes r1 {
  0% {
    width: 0;
    height: 0;
    opacity: 0;
    transform: translate(-50%, -50%);
    border-color: transparent;
  }

  40%,
  60% {
    width: 100%;
    height: 100%;
    opacity: 1;
    border-color: #61dafb;
    transform: translate(-50%, -50%);
  }

  100% {
    width: 100%;
    height: 100%;
    opacity: 1;
    border-color: #61dafb;
    transform: translate(-50%, -50%) rotateZ(30deg) rotateY(70deg);
  }
}

最后是最外层的容器, 让它一直旋转就好了.

@keyframes box-animate {
  0% {
    transform: rotateZ(0);
  }
  100% {
    transform: rotateZ(1turn);
  }
}