您是否曾经提交一个表单,看到一个简单的文本提示就够了?但是,随着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%的位置完成整个动画。
如果您想让您的表单更加引人注目,请尝试使用这个简单而又有趣的动画效果吧!