阿里云服务器 个人网站,昆明网站建设 技术支持,鲜花网站源码,做我女朋友网站p0rn视频大家好#xff0c;我是 Just#xff0c;这里是「设计师工作日常」#xff0c;今天分享的是用 css 实现一个圆形背景动效多选框#xff0c;适用提醒用户勾选场景#xff0c;突出多选框选项#xff0c;可以有效增加用户识别度。
最新文章通过公众号「设计师工作日常」发布…大家好我是 Just这里是「设计师工作日常」今天分享的是用 css 实现一个圆形背景动效多选框适用提醒用户勾选场景突出多选框选项可以有效增加用户识别度。
最新文章通过公众号「设计师工作日常」发布。 目录 整体效果核心代码html 代码css 部分代码 完整代码如下html 页面css 样式页面渲染效果 整体效果 知识点 1️⃣ appearance 属性应用 2️⃣ ::before 以及 ::after 伪元素 3️⃣ transform 以及 transition 属性 4️⃣ :hover、:active 和 :checked 选择器 思路 自定义多选框外观利用伪元素搭建多选框利用变形属性和过渡属性实现动画效果。 适用提醒用户勾选场景突出多选框选项可以有效增加用户识别度。 核心代码部分简要说明了写法思路完整代码在最后可直接复制到本地运行。
核心代码
html 代码
label classlabel66input typecheckbox classcheck-inp66span classspan66/span
/labellabel 标签作为多选框主体 input 标签放到 label 中默认绑定span 标签补充多选框外观元素。 css 部分代码
.label66{position: relative;display: flex;justify-content: center;align-items: center;
}
.check-inp66{width: 40px;height: 40px;border-radius: 50%;position: absolute;background-color: rgba(0, 0, 0, 0.06);z-index: 1;transform: scale(1);transition: transform 0.15s linear;appearance: none; /* none时可以自定义其外观 */
}
.span66{width: 20px;height: 20px;display: block;position: absolute;z-index: 2;cursor: pointer;
}
.span66::before{content: ;width: 20px;height: 20px;border: 2px solid rgba(0,0,0,0.6);border-radius: 3px;box-sizing: border-box;display: block;position: absolute;transition: all 0.3s linear;
}
.span66::after{content: ;width: 10px;height: 5px;display: block;position: absolute;top: 5px;left: 4px;border: solid 2px transparent;border-right: none;border-top: none;transform: rotate(-45deg);transition: border-color 0.3s linear;
}
.label66:hover .span66::before{border-color: #0093E9;
}
.label66:active .check-inp66,.label66:active .check-inp66:checked{transform: scale(0);transition: transform 0.15s linear;
}
.check-inp66:checked{background-color: rgba(0,147,233,0.08);
}
.check-inp66:checked ~ .span66::before{background-color: #0093E9;border-color: #0093E9;
}
.check-inp66:checked ~ .span66::after{border-color: #ffffff;
}1、利用 appearance 属性定义 appearance: none;自定义多选框外观定义圆形浅灰色背景定义 transform 和 transition 属性参数。 2、定义 span 样式利用伪元素 ::before 以及 ::after分别写出多选框的矩形边框和多选框中的对勾元素并且给它们分别增加过渡属性参数。 3、利用 :hover 选择器当鼠标悬浮到多选框上方时多选框边框实现颜色过渡利用 :active 选择器当鼠标左键点击时多选框的圆形背景实现缩小放大过渡效果利用 :checked 选择器当多选框选中时切换圆形背景颜色多选框矩形框背景颜色过渡对勾也过渡显示。 完整代码如下
html 页面
!DOCTYPE html
html langzhheadmeta charsetutf-8link relstylesheet hrefstyle.csstitle圆形背景动效多选框/title/headbodydiv classapplabel classlabel66input typecheckbox classcheck-inp66span classspan66/span/label/div/body
/htmlcss 样式
/** style.css **/
.app{width: 100%;height: 100vh;background-color: #ffffff;position: relative;display: flex;justify-content: center;align-items: center;
}
.label66{position: relative;display: flex;justify-content: center;align-items: center;
}
.check-inp66{width: 40px;height: 40px;border-radius: 50%;position: absolute;background-color: rgba(0, 0, 0, 0.06);z-index: 1;transform: scale(1);transition: transform 0.15s linear;appearance: none; /* none时可以自定义其外观 */
}
.span66{width: 20px;height: 20px;display: block;position: absolute;z-index: 2;cursor: pointer;
}
.span66::before{content: ;width: 20px;height: 20px;border: 2px solid rgba(0,0,0,0.6);border-radius: 3px;box-sizing: border-box;display: block;position: absolute;transition: all 0.3s linear;
}
.span66::after{content: ;width: 10px;height: 5px;display: block;position: absolute;top: 5px;left: 4px;border: solid 2px transparent;border-right: none;border-top: none;transform: rotate(-45deg);transition: border-color 0.3s linear;
}
.label66:hover .span66::before{border-color: #0093E9;
}
.label66:active .check-inp66,.label66:active .check-inp66:checked{transform: scale(0);transition: transform 0.15s linear;
}
.check-inp66:checked{background-color: rgba(0,147,233,0.08);
}
.check-inp66:checked ~ .span66::before{background-color: #0093E9;border-color: #0093E9;
}
.check-inp66:checked ~ .span66::after{border-color: #ffffff;
}
页面渲染效果 以上就是所有代码以及简单的思路希望对你有一些帮助或者启发。 [1] 原文阅读 网站《有趣的css》上线了目前已上线 demo 实例 65 例欢迎大家访问。
网站Funcss CSS 是一种很酷很有趣的计算机语言在这里跟大家分享一些 CSS 实例 Demo为学习者获取灵感和思路提供一点帮助希望你们喜欢。 我是 Just这里是「设计师工作日常」求点赞求关注
