09 手型开关按钮
2023-12-28 23:36:50
效果演示
Code
<div class="checkbox-wrapper-41">
<input type="checkbox">
</div>
body {
height: 100vh;
/* 设置 body 元素的高度为视窗的高度 */
display: flex;
/* 将 body 元素设置为弹性容器 */
justify-content: center;
/* 在主轴上居中对齐 */
align-items: center;
/* 在交叉轴上居中对齐 */
background-color: #e8e8e8;
/* body 元素的背景颜色 */
}
.checkbox-wrapper-41 {
--size: 100px;
}
.checkbox-wrapper-41 input[type="checkbox"] {
-webkit-appearance: none;
width: var(--size);
height: calc(var(--size) / 2);
background-color: #fff;
border: 3px solid #222;
border-radius: 30px 100px 100px 100px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
outline: none;
cursor: pointer;
position: relative;
transition: all 0.5s;
}
.checkbox-wrapper-41 input[type="checkbox"]::before {
content: "";
position: absolute;
width: calc(var(--size) / 2);
height: calc(var(--size) / 2);
left: 0;
top: 50%;
transform: translateY(-50%) scale(0.7);
border: 3px solid #222;
border-radius: 30px 100px 100px 100px;
background-color: #fde881;
box-sizing: border-box;
transition: all 0.5s;
}
.checkbox-wrapper-41 input[type="checkbox"]:checked {
background-color: #fde881;
border-radius: 100px 100px 30px 100px;
}
.checkbox-wrapper-41 input[type="checkbox"]:checked::before {
left: 50%;
background-color: #fff;
border-radius: 100px 100px 30px 100px;
}
实现思路拆分
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #e8e8e8;
}
设置 body 元素的样式:
- 设置 body 的高度为视口的高度。
- 使用 flexbox 将 body 元素的内容水平和垂直居中。
- 设置 body 的背景颜色为 #e8e8e8。
.checkbox-wrapper-41 {
--size: 100px;
}
定义一个名为 “checkbox-wrapper-41” 的 CSS 类,并设置一个 CSS 变量 “–size” 的值为 100px。
.checkbox-wrapper-41 input[type="checkbox"] {
-webkit-appearance: none;
width: var(--size);
height: calc(var(--size) / 2);
background-color: #fff;
border: 3px solid #222;
border-radius: 30px 100px 100px 100px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
outline: none;
cursor: pointer;
position: relative;
transition: all 0.5s;
}
设置类型为 “checkbox” 的 input 元素的样式:
- 禁用默认的外观样式。
- 设置宽度为 CSS 变量 “–size” 的值。
- 设置高度为 “–size” 的一半。
- 设置背景颜色为 #fff。
- 设置边框为 3px 宽的 #222。
- 设置边框的圆角为 30px 100px 100px 100px。
- 添加阴影效果。
- 取消轮廓线样式。
- 设置光标为指针形状。
- 设置相对定位。
- 添加所有属性的过渡效果,过渡时间为 0.5s。
.checkbox-wrapper-41 input[type="checkbox"]::before {
content: "";
position: absolute;
width: calc(var(--size) / 2);
height: calc(var(--size) / 2);
left: 0;
top: 50%;
transform: translateY(-50%) scale(0.7);
border: 3px solid #222;
border-radius: 30px 100px 100px 100px;
background-color: #fde881;
box-sizing: border-box;
transition: all 0.5s;
}
设置类型为 “checkbox” 的 input 元素的伪元素 ::before 的样式:
- 设置伪元素的内容为空。
- 设置绝对定位。
- 设置宽度为 “–size” 的一半。
- 设置高度为 “–size” 的一半。
- 将伪元素相对于父元素左上角的位置设置为 (0, 50%),并通过 translateY(-50%) 将伪元素向上移动自身高度的一半。
- 使用 transform 缩放伪元素的大小为原来的 0.7 倍。
- 设置边框为 3px 宽的 #222。
- 设置边框的圆角为 30px 100px 100px 100px。
- 设置背景颜色为 #fde881。
- 设置盒模型为边框模型。
- 添加所有属性的过渡效果,过渡时间为 0.5s。
.checkbox-wrapper-41 input[type="checkbox"]:checked {
background-color: #fde881;
border-radius: 100px 100px 30px 100px;
}
当复选框被选中时,设置类型为 “checkbox” 的 input 元素的样式:
- 设置背景颜色为 #fde881。
- 设置边框的圆角为 100px 100px 30px 100px。
.checkbox-wrapper-41 input[type="checkbox"]:checked::before {
left: 50%;
background-color: #fff;
border-radius: 100px 100px 30px 100px;
}
当复选框被选中时,设置类型为 “checkbox” 的 input 元素的伪元素 ::before 的样式:
- 将伪元素相对于父元素左上角的位置设置为 (50%, 50%),使其水平居中。
- 设置背景颜色为 #fff。
- 设置边框的圆角为 100px 100px 30px 100px。
文章来源:https://blog.csdn.net/weixin_72553980/article/details/135166422
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!