效果
HTML
html
<label class="switch">
<input type="checkbox" class="switch__input" />
<span class="circle"></span>
</label>
<script type="text/javascript">
document.querySelector('.switch').onclick = function () {
console.log(document.querySelector('.switch__input').checked)
}
</script>
实现思路
- 首先要根据
input
的值来改变样式 input
要隐藏,同时需要可以点击
初始化样式
先定义变量
css
:root {
--border-c: #409eff;
--checked-c: #409eff;
--size: 40px;
}
设置label
样式,这里border-radius
不是百分比,而是近乎无限大的值,这样能仅让两边变圆
css
.switch {
position: relative;
display: block;
height: var(--size);
width: calc(var(--size) * 2);
border-radius: 9999px;
border: 1px solid var(--border-c);
}
设置input
样式,只需要透明,加上铺满即可
css
.switch__input {
position: absolute;
inset: 0;
opacity: 0;
}
.circle {
position: absolute;
top: 0;
left: 0;
height: var(--size);
width: var(--size);
border-radius: 50%;
background-color: #fff;
border: 1px solid var(--border-c);
box-sizing: border-box;
}
现在效果如下
接下来点击时,会改变input
的值,所以根据这个值,我们来设置样式
当check
时,把兄弟元素向右移动即可,再给圆球加个动画
css
.switch__input:checked + .circle {
transform: translateX(100%);
}
.circle {
transition: transform .3s;
}
效果如下
接下来是重头戏了,那就是背景颜色怎么根据值来改变呢
传统方式是用js
控制,不过都什么年代了,还在写传统js
css
.switch:has(.switch__input:checked) {
background-color: var(--checked-c);
}
这样就能实现了,这是什么意思呢??
:has选择器,即.switch
里的元素,被checked
就会触发
这时,当按钮被点击背景颜色就会变
最后加个动画就好了
css
.switch {
position: relative;
display: block;
height: var(--size);
width: calc(var(--size) * 2);
border-radius: 9999px;
border: 1px solid var(--border-c);
transition: background-color .6s .1s;
}
总共0.6s的动画,是按钮移动时长了两倍,并且延迟0.1s触发,这样就很丝滑