大家好,我是 Just,这里是「设计师工作日常」,今天分享的是用 css 实现一个圆形背景动效多选框,适用提醒用户勾选场景,突出多选框选项,可以有效增加用户识别度。
最新文章通过公众号「设计师工作日常」发布。
目录
整体效果
💎知识点:
1️⃣appearance
属性应用
2️⃣::before
以及::after
伪元素
3️⃣transform
以及transition
属性
4️⃣:hover
、:active
和:checked
选择器
🔑思路:
自定义多选框外观,利用伪元素搭建多选框,利用变形属性和过渡属性实现动画效果。
适用提醒用户勾选场景,突出多选框选项,可以有效增加用户识别度。
核心代码部分,简要说明了写法思路;完整代码在最后,可直接复制到本地运行。
核心代码
html 代码
label
标签作为多选框主体,input
标签放到label
中默认绑定,span
标签补充多选框外观元素。
css 部分代码
1、利用
appearance
属性,定义appearance: none;
,自定义多选框外观,定义圆形浅灰色背景,定义transform
和transition
属性参数。
2、定义
span
样式,利用伪元素::before
以及::after
,分别写出多选框的矩形边框和多选框中的对勾元素;并且给它们分别增加过渡属性参数。
3、利用
:hover
选择器,当鼠标悬浮到多选框上方时,多选框边框实现颜色过渡;利用:active
选择器,当鼠标左键点击时,多选框的圆形背景实现缩小放大过渡效果;利用:checked
选择器,当多选框选中时,切换圆形背景颜色,多选框矩形框背景颜色过渡,对勾也过渡显示。
完整代码如下
html 页面
css 样式
页面渲染效果
以上就是所有代码,以及简单的思路,希望对你有一些帮助或者启发。
网站《有趣的css》上线了,欢迎大家访问~ 点击访问: Funcss
CSS 是一种很酷很有趣的计算机语言,在这里跟大家分享一些 CSS 实例 Demo,为学习者获取灵感和思路提供一点帮助,希望你们喜欢。
我是 Just,这里是「设计师工作日常」,求点赞求关注!