我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！
前言
大家好，我是小阵 🔥，一路奔波不停的码字业务员
如果喜欢我的文章，可以关注 ➕ 点赞，与我一同成长吧~😋
加我微信：zzz886885，邀你进群，一起学习交流，摸鱼学习两不误🌟
开开心心学技术大法~~
来了来了，他真的来了~
正文
实现思路
-
可以通过js的
dom.classList.toggle与div互相配合实现 -
当然也可以使用
input的type="radio"或type="checkbox"来实现- 借助了单选或多选的伪类选择器
:checked来区分开选中与非选中的样式
- 借助了单选或多选的伪类选择器
-
但是单纯通过
input来改样式委实还是有点不伦不类了，可以通过input的id与label的for结合使用 -
将input通过
visibility:hidden隐藏起来，然后单独更改label样式，label内部也可以嵌套其他dom来配合实现check按钮中的小白圆 -
然后就是选中与非选中状态的小白圆的动画，用一个
animation搞定 -
剩下的就没什么关键的了
具体实现
html基础
<body>
<h2>How do you want your project to be?</h2>
<div class="toggle-container">
<input type="checkbox" id="good" class="toggle">
<label for="good" class="label">
<div class="ball"></div>
</label>
<span>Good</span>
</div>
<div class="toggle-container">
<input type="checkbox" id="cheap" class="toggle">
<label for="cheap" class="label">
<div class="ball"></div>
</label>
<span>Cheap</span>
</div>
<div class="toggle-container">
<input type="checkbox" id="fast" class="toggle">
<label for="fast" class="label">
<div class="ball"></div>
</label>
<span>Fast</span>
</div>
</body>
关键css
.toggle:checked + .label {
background-color: #8e44ad;
}
.ball {
background: #fff;
height: 34px;
width: 34px;
border-radius: 50%;
position: absolute;
top: 3px;
left: 3px;
align-items: center;
justify-content: center;
animation: slideOff 0.3s linear forwards;
}
.toggle:checked + .label .ball {
animation: slideOn 0.3s linear forwards;
}
@keyframes slideOn {
0% {
transform: translateX(0) scale(1);
}
50% {
transform: translateX(20px) scale(1.2);
}
100% {
transform: translateX(40px) scale(1);
}
}
@keyframes slideOff {
0% {
transform: translateX(40px) scale(1);
}
50% {
transform: translateX(20px) scale(1.2);
}
100% {
transform: translateX(0) scale(1);
}
}
关键是伪类选择器的:checked的使用
完整代码
总结
- 可以通过js来实现，也可以通过css来实现，当然，如果要实现更复杂的功能，势必要借助js的
- js实现可以通过
dom.classList.toggle来快捷实现，也可以手动判断classList是否含有激活class来实现toggle效果 - css可以通过
input的type为checked或checkbox的伪类选择器:checked来实现激活与非激活状态
结语
如果文章真的有帮到你，希望可以多多点赞、收藏、关注支持一波呀！！小阵会很开心哒~
热爱开源，支持开源，拥抱开源！
文章如有错误或不严谨之处，还望指出，感谢感谢！！！
往期好文推荐
