支付宝积分领取小球模拟

<div class='foo'></div>
<style>
.foo {
    
    
  display: flex;
  font-size: 10px;
  align-items: center;
  border-radius: 50%;
  justify-content: center;
  width: 30px;
  height: 30px;
  position: fixed;
  color: #FFFFFF;
  top: 30rpx;
  left: 70%;
  animation-name: slideDown;
  /*默认贝塞尔函数*/
  animation-timing-function: ease-out;
  /*动画时间*/
  animation-duration: 1500ms;
  /*动画循环播放*/
  animation-iteration-count: infinite;
  -moz-box-shadow: -5px -5px 10px 3px rgb(277, 102, 63) inset;
  -webkit-box-shadow: -5px -5px 10px 3px rgb(277, 102, 63) inset;
  box-shadow: -5px -5px 10px 3px rgb(277, 102, 63) inset;
}
/*小积分上下闪烁*/
@keyframes slideDown {
    
    
  from {
    
    
      transform: translateY(0);
  }
  50% {
    
    
      transform: translateY(5px);

  }
  to {
    
    
      transform: translateY(0);
     
  }
}
//点击替换css样式  平移到一定位置消失
.fooClear {
    
    
  
  display: flex;
  font-size: 10px;
  align-items: center;
  border-radius: 50%;
  justify-content: center;
  width: 30px;
  height: 30px;
  position: fixed;
  color: #FFFFFF;
  top: 30rpx;
  left: 70%;
  animation-name: slideDownTwo;
  /*默认贝塞尔函数*/
  animation-timing-function: ease-out;
  /*动画时间*/
  animation-duration: 1500ms;
  /*动画循环播放*/
  -moz-box-shadow: -5px -5px 10px 3px rgb(277, 102, 63) inset;
  -webkit-box-shadow: -5px -5px 10px 3px rgb(277, 102, 63) inset;
  box-shadow: -5px -5px 10px 3px rgb(277, 102, 63) inset;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  -webkit-animation-duration: 1500ms;
  -moz-animation-duration: 1500ms;
  -o-animation-duration: 1500ms;
}

/*清除小的积分*/
@keyframes slideDownTwo {
    
    
  from {
    
    
    transform: translateY(0);
    opacity: 0.7;
}
  50% {
    
    
      opacity: 0.5;
  }
  to {
    
    
    top:55rpx;
    left:90rpx;
    opacity: 0;
    visibility: hidden;
    width: 0px;
    height: 0px;
  }
}
</style>