ajax+对号,操作成功动画效果（圆圈变成勾号）

CSS

语言：

CSSSCSS

确定

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

.wrapper {

width: 100%;

height: 500px;

display: flex;

justify-content: center;

align-items: center;

font-family: 'Lato';

}

.hide {

animation: modalHide 1.2s forwards;

-webkit-animation-delay: .2s;

}

.checkmark-interaction-wrap {

background-color: lightgrey;

border-radius: .7rem;

width: 50%;

flex-wrap: wrap;

display: flex;

justify-content: center;

}

.checkmark-wrapper {

width: 75px;

height: 75px;

}

.checkSVG {

animation: checkSVG .5s ease forwards;

-webkit-animation-delay: .7s;

}

.checkmark {

stroke: none;

fill: none;

stroke-dashoffset: -300;

stroke-dasharray: 850;

animation: check 2s ease forwards;

stroke-width: 20;

stroke-miterlimit: 400;

animation: check .7s ease forwards;

-webkit-animation-delay: .7s;

}

.circle {

cx: 275;

cy: 275;

r: 200;

stroke: none;

fill: none;

stroke-dashoffset: -1260;

stroke-dasharray: 1260;

animation: circle 1.2s ease forwards;

stroke-width: 20;

stroke-miterlimit: 10;

-webkit-stroke-alignment: inner;

}

.fact {

display: flex;

width: 100%;

padding: 1rem 5rem;

text-align: center;

}

.interaction {

height: 100px;

display: flex;

justify-content: center;

align-items: center;

padding: 2rem .5rem;

}

.btn {

border: none;

border-radius: .5rem;

color: white;

background-color: #61B136;

padding: .5rem 1rem;

outline: none;

cursor: pointer;

}

@keyframes circle {

0% {

stroke-dashoffset: -1260;

stroke: #61B136;

r: 200;

stroke-dasharray: 1260;

}

40% {

stroke: #61B136;

stroke-dashoffset: 0;

r: 200;

fill: none;

stroke-width: 20;

}

75% {

stroke: #61B136;

stroke-dashoffset: 0;

/*transform: scale(1);*/

stroke-width: 250;

r: 85;

fill: #61B136;

}

95% {

stroke-dashoffset: 0;

/*transform: scale(1.1);*/

stroke-width: 250;

r: 85;

fill: #61B136;

}

100% {

stroke: #61B136;

stroke-dashoffset: 0;

/*transform: scale(1);*/

stroke-width: 250;

r: 85;

fill: #61B136;

}

}

@keyframes check {

0% {

stroke-dashoffset: -300;

stroke: white;

}

40% {

opacity: 1;

}

80% {

opacity: 1;

/*transform: scale(1);*/

}

85% {

stroke-dashoffset: 500;

/*transform: scale(1.1);*/

}

100% {

opacity: 1;

stroke-dashoffset: 500;

/*transform: scale(1);*/

stroke: white;

}

}

@keyframes checkSVG {

0% {

transform: none;

}

80% {

transform: scale(1.2);

}

100% {

tranform: scale(1);

}

}

@keyframes modalHide {

0% {

opacity: 1;

display: static;

}

80% {

opacity: 1;

display: static;

}

100% {

display: none;

z-index: -1;

opacity: 0;

}

}

@keyframes modalShow {

0% {

opacity: 0;

display: flex;

}

75% {

opacity: 0;

}

100% {

opacity: 1;

}

}