CSS原子效果

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

css好玩的特效，原子效果

 <div class="box">
        <div class="ring ring1">
          <div class="particle"></div>
        </div>
        <div class="ring ring2">
          <div class="particle"></div>
        </div>
        <div class="ring ring3">
          <div class="particle"></div>
        </div>
      </div>

body {
    background: #333;
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
    perspective: 1200px;
  }
  
  .box {
    position: relative;
    top: 0;
    transform-style: preserve-3d;
    animation: hovering 1s infinite alternate-reverse ease-in-out;
  }
  .ring {
    pointer-events: none;
    width: 400px;
    height: 400px;
    position: absolute;
    top: -150px;
    left: -100px;
    transform-style: preserve-3d;
  }
  .ring .particle {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    border: 10px solid;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    border-top: 0;
    border-left: 0;
    border-bottom: 0;
    box-shadow: 0 0 1px 0px currentColor;
    transform-style: preserve-3d;
  }
  .ring .particle:after {
    position: absolute;
    top: 100%;
    left: 50%;
    display: block;
    content: "";
    width: 5px;
    height: 5px;
    background: currentColor;
    border-radius: 50%;
    box-shadow: 0 0 5px 0px white;
  }
  
  .ring1 {
    color: #00ccff;
    animation: rotateAnimate1 16s infinite reverse linear;
  }
  .ring1 .particle {
    -webkit-animation: rotateAnimate1 2s infinite linear;
            animation: rotateAnimate1 2s infinite linear;
  }
  
  .ring2 {
    color: #fffb19;
    animation: rotateAnimate1 16s infinite reverse linear;
  }
  .ring2 .particle {
    margin-top: 15px;
    margin-left: 15px;
    width: 370px;
    height: 370px;
    -webkit-animation: rotateAnimate2 2s infinite linear;
            animation: rotateAnimate2 2s infinite linear;
  }
  .ring2 .particle:after {
    top: 0%;
  }
  
  .ring3 {
    color: #ff0f66;
    animation: rotateAnimate1 16s infinite reverse linear;
  }
  .ring3 .particle {
    margin-top: 30px;
    margin-left: 30px;
    width: 340px;
    height: 340px;
    -webkit-animation: rotateAnimate3 2s infinite linear;
            animation: rotateAnimate3 2s infinite linear;
  }
  
  @-webkit-keyframes rotateAnimate1 {
    0% {
      transform: rotateX(45deg) rotateZ(0deg);
    }
    100% {
      transform: rotateX(45deg) rotateZ(360deg);
    }
  }
  
  @keyframes rotateAnimate1 {
    0% {
      transform: rotateX(45deg) rotateZ(0deg);
    }
    100% {
      transform: rotateX(45deg) rotateZ(360deg);
    }
  }
  @-webkit-keyframes rotateAnimate2 {
    0% {
      transform: rotateY(45deg) rotateX(-45deg) rotateZ(0deg);
    }
    100% {
      transform: rotateY(45deg) rotateX(-45deg) rotateZ(-360deg);
    }
  }
  @keyframes rotateAnimate2 {
    0% {
      transform: rotateY(45deg) rotateX(-45deg) rotateZ(0deg);
    }
    100% {
      transform: rotateY(45deg) rotateX(-45deg) rotateZ(-360deg);
    }
  }
  @-webkit-keyframes rotateAnimate3 {
    0% {
      transform: rotateY(-45deg) rotateX(-45deg) rotateZ(180deg);
    }
    100% {
      transform: rotateY(-45deg) rotateX(-45deg) rotateZ(540deg);
    }
  }
  @keyframes rotateAnimate3 {
    0% {
      transform: rotateY(-45deg) rotateX(-45deg) rotateZ(180deg);
    }
    100% {
      transform: rotateY(-45deg) rotateX(-45deg) rotateZ(540deg);
    }
  }
  @-webkit-keyframes hovering {
    0% {
      transform: translate3d(0, 0, 0);
    }
    100% {
      transform: translate3d(0, -10px, 0);
    }
  }
  @keyframes hovering {
    0% {
      transform: translate3d(0, 0, 0);
    }
    100% {
      transform: translate3d(0, -10px, 0);
    }
  }