大家好,我是 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,这里是「设计师工作日常」,求点赞求关注!