有趣的css - 勾选动效多选框

最新推荐文章于 2024-05-23 15:36:14 发布

设计师工作日常

最新推荐文章于 2024-05-23 15:36:14 发布

阅读量1k

点赞数 26

分类专栏：有趣的css 文章标签： css 动效设计 ux/ui 交互设计多选框

本文链接：https://blog.csdn.net/justliu1989/article/details/139148677

版权

有趣的css 专栏收录该内容

70 篇文章 2 订阅

订阅专栏

大家好，我是 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;
}