[分享]css3支付成功动画

CSS3支付成功动画

/* 定义基本样式 */
.success{
  width:50px;
  height:50px;
  margin:0 auto;
  border-radius: 50%;
  border: 5px solid #3AAF43;
  position: relative;
}

/* 在success元素内添加对勾元素 */
.success:before,
.success:after{
  background-color: #3AAF43;
  position:absolute;
  border-radius:2px;
  content:';
}

/* 定义对勾元素 */
.success:before{
  width: 13px;
  height: 25px;
  left: 7px;
  top: 14px;
  transform: rotate(-45deg);
}

.success:after{
  width: 25px;
  height: 9px;
  left: -1px;
  top: 19px;
  transform: rotate(-45deg);
}

/* 定义动画关键帧 */
@keyframes stretchdelay {
  0%, 40%, 100% {
    transform: scaleX(0.0)
  }
  20% {
    transform: scaleX(1.0)
  }
}

/* 定义动画 */
.success {
  animation: stretchdelay 1s ease-in-out;
  animation-fill-mode: forwards; /* 动画结束后保留最后一帧 */
} 

上述代码中，我们定义了一个success类，用于表示支付成功的动画元素。该元素由一个圆形外框和对勾组成。通过定义伪元素:before和:after，我们得以实现对勾的创建。接下来通过使用CSS3动画的关键帧动画，我们可以让对勾动画出现并且慢慢变得明显。最终，动画停留在成功状态。