仿支付宝动态打钩效果

在开发过程中有时会遇到一些特殊的需求，比如说支付完成的动态效果，在设计师没有提供素材的情况下我们该如何实现以下图片类似的效果呢？

tick-icon.gif

其实我们第一个反应可能是用canvas画一个出来，但这稍有难度，那么我们有办法用css的动画去完成这个效果呢？其实也是可以实现的。

我们先定义出基本的html代码，思路主要是定义出外部的圆和内部的勾：

接下来是最主要的css代码：

.tick-icon {
  margin-top: 100px;
  width: 80px;
  height: 80px;
  border: 4px solid transparent;
  border-radius: 50%;
  margin: 20px auto 30px;
  padding: 0;
  position: relative;
  border-color: rgb(2, 122, 206);
}

.tick-icon [class^='tick-icon-line'] {
  height: 5px;
  display: block;
  border-radius: 2px;
  position: absolute;
  z-index: 2;
  background-color: rgb(2, 122, 206);
}

/*勾的左半部分*/
.tick-icon-line-left {
  width: 25px;
  left: 14px;
  top: 46px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-animation: lineLeftAnimation 1.5s;
  animation: lineLeftAnimation 1.5s;
}

/*勾的右半部分*/
.tick-icon-line-right {
  width: 47px;
  right: 8px;
  top: 38px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: lineRightAnimation 1.5s;
  animation: lineRightAnimation 1.5s;
}

.tick-icon [class^='tick-icon-circular-line'] {
  border-radius: 50%;
  position: absolute;
  width: 60px;
  height: 120px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

/*圆的左半部分*/
.tick-icon [class^='tick-icon-circular-line'][class$='left'] {
  border-radius: 120px 0 0 120px;
  top: -7px;
  left: -33px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transform-origin: 60px 60px;
  transform-origin: 60px 60px;
}

/*圆的右半部分*/
.tick-icon [class^='tick-icon-circular-line'][class$='right'] {
  border-radius: 0 120px 120px 0;
  top: -11px;
  left: 30px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transform-origin: 0 60px;
  transform-origin: 0 60px;
}

.tick-icon-circular-line-left {
  background: rgb(255, 255, 255);
}

/*圆圈动画*/
.tick-icon-circular-line-right {
  -webkit-animation: circularLineRightAnimation 5.25s ease-in;
  animation: circularLineRightAnimation 5.25s ease-in;
  background: rgb(255, 255, 255);
}

.tick-icon-ring {
  width: 80px;
  height: 80px;
  border: 4px solid rgba(2, 122, 206, 0.3);
  border-radius: 50%;
  position: absolute;
  left: -4px;
  top: -4px;
  z-index: 2;
}

.tick-icon-fix {
  width: 7px;
  height: 90px;
  position: absolute;
  left: 28px;
  top: 8px;
  z-index: 1;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  background: rgb(255, 255, 255);
}

@-webkit-keyframes lineLeftAnimation {
  0% {
    width: 0;
    left: 1px;
    top: 19px;
  }

  54% {
    width: 0;
    left: 1px;
    top: 19px;
  }

  70% {
    width: 50px;
    left: -8px;
    top: 37px;
  }

  84% {
    width: 17px;
    left: 21px;
    top: 48px;
  }

  100% {
    width: 25px;
    left: 14px;
    top: 45px;
  }
}

@keyframes lineLeftAnimation {
  0% {
    width: 0;
    left: 1px;
    top: 19px;
  }

  54% {
    width: 0;
    left: 1px;
    top: 19px;
  }

  70% {
    width: 50px;
    left: -8px;
    top: 37px;
  }

  84% {
    width: 17px;
    left: 21px;
    top: 48px;
  }

  100% {
    width: 25px;
    left: 14px;
    top: 45px;
  }
}

@-webkit-keyframes lineRightAnimation {
  0% {
    width: 0;
    right: 46px;
    top: 54px;
  }

  65% {
    width: 0;
    right: 46px;
    top: 54px;
  }

  84% {
    width: 55px;
    right: 0;
    top: 35px;
  }

  100% {
    width: 47px;
    right: 8px;
    top: 38px;
  }
}

@keyframes lineRightAnimation {
  0% {
    width: 0;
    right: 46px;
    top: 54px;
  }

  65% {
    width: 0;
    right: 46px;
    top: 54px;
  }

  84% {
    width: 55px;
    right: 0;
    top: 35px;
  }

  100% {
    width: 47px;
    right: 8px;
    top: 38px;
  }
}

@-webkit-keyframes circularLineRightAnimation {
  0% {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }

  5% {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }

  12% {
    -webkit-transform: rotate(-405deg);
    transform: rotate(-405deg);
  }

  100% {
    -webkit-transform: rotate(-405deg);
    transform: rotate(-405deg);
  }
}

@keyframes circularLineRightAnimation {
  0% {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }

  5% {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }

  12% {
    -webkit-transform: rotate(-405deg);
    transform: rotate(-405deg);
  }

  100% {
    -webkit-transform: rotate(-405deg);
    transform: rotate(-405deg);
  }
}

这些代码开箱即用，需要注意的是直接引用或许会引发一些css样式的冲突，比较好的方式是封装成一个单独的组件避免污染。