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

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

目录

整体效果

有趣的css - 勾选动效多选框_ux/ui

知识点：
① 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>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.

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.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.

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>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.

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;
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.

页面渲染效果

有趣的css - 勾选动效多选框_ux/ui

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

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

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