勾选框里的勾√的实现

实际上就是伪元素的长方形,上下左右边框,在旋转过后把上和左边框给隐藏了。这样就形成√了

.mycheckBox::after{
position: absolute;
display: table;
border: 2px solid #fff;
border-top: 0;
border-left: 0;
transform: rotate(45deg) scale(1) translate(-50%, -50%);
opacity: 1;
transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
top: 50%;
left: 21.5%;
width: 5px;
height: 10px;
content: ' ';
}

 

posted @ 2024-05-08 14:27  你风致  阅读(8)  评论(0编辑  收藏  举报