有趣的css - 勾选动效多选框-CFANZ编程社区

大家好，我是 Just，这里是「设计师工作日常」，今天分享的是动效勾选的多选框按钮，适用于注册页中，用户协议勾选时的场景，可以有效增加用户交互体验。

最新文章通过公众号「设计师工作日常」发布。

(目录)

整体效果

知识点： ① label 标签内部绑定 input 标签 ② 伪元素 :before 、:after ③ transform 属性和 transition 过渡属性 ④ :checked 选择器

思路：多选框中的对号，由两个矩形组成，然后让两个矩形同时滑动到多选框区域，形成视觉动画效果。

适用于注册页中，用户协议勾选时的场景，可以有效增加用户交互体验。

核心代码部分，简要说明了写法思路；完整代码在最后，可直接复制到本地运行。

核心代码

html 代码

<label class=label61>
  <input type=checkbox class=check-inp61>
  <span class=right-icon61></span>
  <span class=label-bg></span>
</label>

label 标签作为多选框主体，绑定 input 标签，后续补充两个 span 标签。

css 部分代码

.label61{
  width: 16px;
  height: 16px;
  position: relative;
  overflow: hidden;  /*隐藏溢出部分*/
  cursor: pointer;
}
.check-inp61{
  display: none;
}
.right-icon61{
  width: 16px;
  height: 16px;
  display: block;
  position: absolute;
  z-index: 10;
}
.right-icon61:before,.right-icon61:after{
  content: '';
  width: 2px;
  height: 6px;
  background-color: #ffffff;
  position: absolute;
  top: -2px;
  left: -4px;
  transform: rotate(-45deg);
  transition: all .2s linear;
}
.right-icon61:after{
  height: 10px;
  top: -9px;
  left: 18px;
  transform: rotate(45deg);
}
.label-bg{
  width: 16px;
  height: 16px;
  background: transparent;
  display: block;
  border: 1px solid rgba(0,0,0,0.2);
  border-radius: 3px;
  box-sizing: border-box;
  position: absolute;
  transition: all .2s linear;
}
.check-inp61:checked + .right-icon61:before{
  transform: rotate(-45deg) translate(0,12px);
}
.check-inp61:checked + .right-icon61:after{
  transform: rotate(45deg) translate(2px,15px);
}
.check-inp61:checked ~ .label-bg{
  border-color: #3185fa;
  background: #3185fa;
}
.label61:hover .label-bg{
  border-color: #3185fa;
}

1、定义 label 标签样式，设置 overflow: hidden; 属性，隐藏内部元素溢出部分；定义 input 多选框 display: none; 属性，将 input 标签整体隐藏。

2、定义 .right-icon61 第一个 span 标签样式，基于 .right-icon61 创建伪元素 .right-icon61:before 和 .right-icon61:after ，将这两个伪元素设置成小的矩形，然后利用 transform 属性，将两个小矩形分别旋转 -45deg 和 45deg 后，定位到 label 标签外隐藏，再设置 transition 过渡属性。

3、定义第二个 span 标签 .label-bg 的样式，将它作为多选框的背景元素，默认背景透明 background: transparent; ，同样也设置 transition 过渡属性。

4、利用 :checked 选择器，来判断 input 多选框 .check-inp61 ，是否被选中；当选中时，伪元素 .right-icon61:before 和 .right-icon61:after 则进行变形移动到 label 标签内，形成一个对号，表示多选框已勾选；而背景元素第二个 span 标签 .label-bg 的背景和边框样式分别过渡成设置的样式。

5、当鼠标悬浮在 label 标签上方时，利用 :hover 选择器，给第二个 span 标签 .label-bg 的背景元素改变边框颜色，表示鼠标悬浮时的变化。

提示： 注意在使用 :checked + 和 :checked ~ 时，选择器选中的元素差异性。

完整代码如下

html 页面

<!DOCTYPE html>
<html lang=zh>
  <head>
    <meta charset=utf-8>
    <link rel=stylesheet href=style.css>
    <title>勾选动效多选框</title>
  </head>
  <body>
    <div class=app>
      <label class=label61>
        <input type=checkbox class=check-inp61>
        <span class=right-icon61></span>
        <span class=label-bg></span>
      </label>
    </div>
  </body>
</html>

css 样式

/** style.css **/
.app{
  width: 100%;
  height: 100vh;
  background-color: #ffffff;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.label61{
  width: 16px;
  height: 16px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.check-inp61{
  display: none;
}
.right-icon61{
  width: 16px;
  height: 16px;
  display: block;
  position: absolute;
  z-index: 10;
}
.right-icon61:before,.right-icon61:after{
  content: '';
  width: 2px;
  height: 6px;
  background-color: #ffffff;
  position: absolute;
  top: -2px;
  left: -4px;
  transform: rotate(-45deg);
  transition: all .2s linear;
}
.right-icon61:after{
  height: 10px;
  top: -9px;
  left: 18px;
  transform: rotate(45deg);
}
.label-bg{
  width: 16px;
  height: 16px;
  background: transparent;
  display: block;
  border: 1px solid rgba(0,0,0,0.2);
  border-radius: 3px;
  box-sizing: border-box;
  position: absolute;
  transition: all .2s linear;
}
.check-inp61:checked + .right-icon61:before{
  transform: rotate(-45deg) translate(0,12px);
}
.check-inp61:checked + .right-icon61:after{
  transform: rotate(45deg) translate(2px,15px);
}
.check-inp61:checked ~ .label-bg{
  border-color: #3185fa;
  background: #3185fa;
}
.label61:hover .label-bg{
  border-color: #3185fa;
}

页面渲染效果

以上就是所有代码，以及简单的思路，希望对你有一些帮助或者启发。

CSS 是一种很酷很有趣的计算机语言，在这里跟大家分享一些 CSS 实例 Demo，为学习者获取灵感和思路提供一点帮助，希望你们喜欢。

我是 Just，这里是「设计师工作日常」，求点赞求关注！