[分享]css3抖音logo教程

CSS3抖音Logo教程

CSS3可以用来制作各种华丽的效果，今天为大家分享一下如何使用CSS3来制作一个抖音Logo效果。

 <div class="logo">
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
  </div>

  .logo {
    position: relative;
    width: 4rem;
    height: 4rem;
    margin: 1rem auto;
  }
  .logo i {
    position: absolute;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: #fff;
    animation: move 1s ease infinite;
  }
  .logo i:nth-of-type(1) {
    top: 0;
    left: 0;
    animation-delay: 0.2s;
  }
  .logo i:nth-of-type(2) {
    top: 0;
    left: 1.5rem;
    animation-delay: 0.6s;
  }
  .logo i:nth-of-type(3) {
    top: 0;
    right: 0;
    animation-delay: 0.8s;
  }
  .logo i:nth-of-type(4) {
    bottom: 0;
    left: 0;
    animation-delay: 0.6s;
  }
  .logo i:nth-of-type(5) {
    bottom: 0;
    left: 1.5rem;
    animation-delay: 0.2s;
  }
  .logo i:nth-of-type(6) {
    bottom: 0;
    right: 0;
    animation-delay: 0.8s;
  }
  @keyframes move {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(2.5rem);
    }
    100% {
      transform: translateY(0);
    }
  } 

首先，我们需要一个包含六个 i 标签的标签，每个 i 标签都代表一个小球。

接下来，我们需要设置一些基础样式，包括设置标签为相对定位，设置 i 标签为绝对定位，设置球的圆角和背景颜色，以及设置动画的相关属性。

最后，在 i 标签中，我们可以使用:nth-of-type()选择器来设置每个球的位置和动画延迟时间。该选择器表示选择特定类型的元素，如 i ，在兄弟元素中的第几个位置。

通过这样的设置，就可以制作出一个华丽的抖音Logo效果，非常酷炫。快来尝试一下吧！