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%);
  }
}
 

效果如下：

以上