[分享]css3打钩样式

CSS3中提供了许多有用的样式特性，其中打钩样式是经常在应用中使用的一种样式。它可以使页面中的选项或状态更加直观、易于理解。下面是一个示例：.tick { display: inlineblock; ...

CSS3中提供了许多有用的样式特性，其中打钩样式是经常在应用中使用的一种样式。它可以使页面中的选项或状态更加直观、易于理解。下面是一个示例：

.tick {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #42b983;
    position: relative;
    transition: all 0.2s ease-in-out;
    margin-right: 10px;
}

.tick:before {
    content: "";
    position: absolute;
    bottom: 5px;
    right: -2px;
    width: 6px;
    height: 12px;
    border-bottom: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
    opacity: 0;
    transition: all 0.2s ease-in-out;
}

.tick:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 2px #42b983;
    opacity: 0;
    transition: all 0.2s ease-in-out;
}

.tick:checked:before, .tick:checked:after {
    opacity: 1;
}

.tick:focus {
    outline: none;
    box-shadow: inset 0 0 0 2px #42b983;
} 

上面的代码实现了一个简单的打钩样式，它包含一个圆形方框和一个打钩图标。其中使用了伪元素:before和:after来绘制打钩图标。当该元素被选中时，打钩图标才会显示。此外，还定义了:focus样式，使得元素在获得焦点时有一个可视化反馈。

这是一个非常基础的打钩样式，您可以根据需要进行更改和扩展。例如，您可以添加不同的动画效果、更改打钩的大小或颜色等等。