[分享]css3打钩

CSS3是目前前端开发中不可或缺的技术之一，它为网页设计师和开发人员提供了更直观和丰富的效果和交互功能。本文将介绍如何使用CSS3来实现一个简单的打钩效果。.checkmark { width: 30...

CSS3是目前前端开发中不可或缺的技术之一，它为网页设计师和开发人员提供了更直观和丰富的效果和交互功能。本文将介绍如何使用CSS3来实现一个简单的打钩效果。

.checkmark {
  width: 30px;
  height: 30px;
  border: 1px solid #ccc;
  position: relative;
}

.checkmark::before,
.checkmark::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 16px;
  width: 5px;
  height: 2px;
  background: #ccc;
}

.checkmark::before {
  transform: rotate(-45deg);
}

.checkmark::after {
  transform: rotate(45deg);
}

.checkmark.checked::before,
.checkmark.checked::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 16px;
  width: 5px;
  height: 2px;
  background: #00***0;
}

.checkmark.checked::before {
  transform: rotate(-45deg);
}

.checkmark.checked::after {
  transform: rotate(45deg);
} 

上面的代码中，我们首先定义了一个 checkmark 类，它有一个边框和一个相对定位。然后我们在 checkmark 类后面添加 ::before 和 ::after 伪元素，它们分别对应在钩子的左半部分和右半部分创建一个斜杠。

接下来，我们对这两个伪元素应用旋转变换来制作钩形。我们使用transform属性和rotate函数旋转伪元素，并设置其背景色为灰色。此时，我们需要为 checked 添加类，以将钩形的颜色更改为绿色。我们可以只需更新伪元素的背景颜色，而无需更改旋转变换。

现在，我们只需要在HTML中添加 checkmark 类，并在需要时通过JavaScript来切换 checked 类即可实现一个简单而优雅的打钩效果。