css 微信 对勾动画

CSS是一种用于网页布局和样式设计的语言，而微信则是最流行的社交媒体APP之一。在设计网页或者在微信中开发小程序时，我们有时需要使用CSS来实现各种动画效果，比如对勾动画就是其中之一。

对勾动画通常用于用户提交表单成功后的提示，其特点是简单明了、直观易懂。下面我们就来看一下如何利用CSS实现微信对勾动画。

.checkmark {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background-color: #1AAD19;
        position: relative;
}
.checkmark:after {
        content: ';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(-45deg);
        width: 10px;
        height: 20px;
        border-bottom: 3px solid white;
        border-right: 3px solid white;
}
.checkmark:before {
        content: ';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(45deg);
        width: 20px;
        height: 10px;
        border-bottom: 3px solid white;
        border-right: 3px solid white;
}
.checkmark.animate:after {
        animation: drawCheck .25s ease-out 0s 1 forwards;
}
.checkmark.animate:before {
        animation: drawCheck .25s ease-out .25s 1 forwards;
}
@keyframes drawCheck {
    from {
            width: 0;
            height: 0;
            border-right: 3px solid white;
    }
    to {
            width: 30px;
            height: 30px;
            border-right: 3px solid white;
    }
}
    

首先，我们定义了一个类名为checkmark的元素，它具有一定的宽度、高度和圆角，背景颜色是绿色。然后，在checkmark元素中定义了:before和:after伪元素，这两者分别代表对勾的两条线段。通过transform属性和rotate函数，我们将这两条线段进行了旋转和平移以达到对勾的效果。

接着，我们使用CSS3动画功能，在.checkmark.animate:after和.checkmark.animate:before中分别设置了drawCheck动画，并在最后一个关键帧保持状态，也就是让这两条线段停在了对勾状态。

至此，我们就实现了微信对勾动画效果的设计。如果你想将它应用于自己的网页或小程序中，只需在对应元素的class属性中添加checkmark和animate即可。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！