css3提交成功后打对勾动画

您是否曾经提交一个表单，看到一个简单的文本提示就够了？但是，随着web技术的发展，现在您可以让它更有趣和生动。

CSS3提供了大量的动画效果，其中最受欢迎的之一就是提交成功后打对勾的动画。这种动画让用户感到舒适和愉悦，更能够吸引他们的关注。

以下是CSS3提交成功后打对勾动画的代码：

.checkmark {
  width: 60px;
  height: 90px;
  margin: auto;
  line-height: 80px;
  font-size: 70px;
  color: #57c87f;
  animation: check 0.6s;
}

@keyframes check {
  0% {
    stroke-dasharray: 10 150;
    stroke-dashoffset: 0;
    transform: rotate(45deg);
  }
  50% {
    stroke-dasharray: 90 150;
    stroke-dashoffset: -35;
    transform: rotate(45deg);
  }
  100% {
    stroke-dasharray: 90 150;
    stroke-dashoffset: -124;
    transform: rotate(45deg);
  }
}

这段代码中，我们定义了一个类名叫做"checkmark"，并且设置了其宽度、高度、外边距等属性。接着，我们设置了动画效果，通过使用stroke-dasharray和stroke-dashoffset属性来实现。

这个动画的过程是这样的：我们先在0%的位置将对号的线条初始化，然后在50%的位置逐步展现出来，最终在100%的位置完成整个动画。

如果您想让您的表单更加引人注目，请尝试使用这个简单而又有趣的动画效果吧！