css 图片 打钩 |css背景图所有属性在一起

/* 带页面加载效果的动画打钩 */
.tick {
width: 30px;
height: 30px;
position: relative;
overflow: hidden;
}
.tick::before {
content: "";
position: absolute;
top: 50%;
left: 20%;
width: 6px;
height: 12px;
border: 2px solid #fff;
border-top: none;
border-right: none;
transform: rotate(-45deg);
animation: tick 0.3s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
@keyframes tick {
0% {
height: 0;
width: 0;
}
100% {
height: 12px;
width: 6px;
top: 50%;
left: 50%;
}
}
/* 不带动画的静态打钩 */
.checked {
position: relative;
display: inline-block;
width: 20px;
height: 20px;
border: 1px solid #aaa;
border-radius: 50%;
margin-right: 10px;
}
.checked::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 5px;
height: 10px;
border: solid #aaa;
border-width: 0 2px 2px 0;
transform: translate(-50%, -50%) rotate(45deg);
}

以上代码实现了两种不同的打钩效果，第一种带有页面加载效果的动画打钩，通过使用CSS3的动画实现。而第二种效果则是静态的打钩，通过伪元素的方式在勾选框中添加元素来实现。这两种方式各有优劣，根据具体的需求来选择使用哪一种效果。