css3小球上下移動效果

   .ball-item {
        height: 96px;
        width: 96px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: url('@/assets/nav-big-screen/ball.png') no-repeat 100% /100% 100%;
        color: #fff;
        font-size: 16px;
        margin-right: 18px;
        animation-name: tossing;
        animation-duration: 3.5s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
        &:hover {
// 滑鼠經過時，暫停動畫
          animation-play-state: paused;
        }
      }

  // 球球
@keyframes tossing {
  0% {
    transform: translateY(10%);
  }
  50% {
    transform: translateY(4%);
  }
  100% {
    transform: translateY(10%);
  }
}

效果如下：

以上