当前第2页 返回上一页
然后我们将这两个草图放到label内
1 2 3 4 5 6 7 8 9 10 11 12 13 | <label for="ck4">
<input type="checkbox" id="ck4">
<div class="toggle">
<div class="cookie"></div>
</div>
</label>
<br>
<label for="ck3">
<input type="checkbox" id="ck3" checked>
<div class="toggle2">
<div class="cookie2"></div>
</div>
</label>
|
效果：
结合label和checkbox整理、优化css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | <label for="ck5">
<input type="checkbox" id="ck5">
<div class="toggle-finish">
<div class="cookie-finish"></div>
</div>
</label>
<br>
<label for="ck6">
<input type="checkbox" id="ck6" checked>
<div class="toggle-finish">
<div class="cookie-finish"></div>
</div>
</label>
.toggle-finish{
cursor:pointer;
display:inline-block;
position:relative;
height:25px;
width:50px;
border-radius:4px;
background:#CC0000;
}
.cookie-finish{
position:absolute;
left:2px;
top:2px;
bottom:2px;
width:50%;
background:rgba(230,230,230,0.9);
border-radius:3px;
}
input:checked + .toggle-finish{
background:#66CC33;
}
input:checked + .toggle-finish .cookie-finish{
left:auto;
right:2px;
}
|
效果：
到此为止就已经基本实现一个开关的功能了，记得将input隐藏起来哦。
相关视频教程推荐：css视频教程
以上就是css如何实现开关效果的详细内容，更多文章请关注木庄网络博客！
返回前面的内容
相关阅读 >>
css该如何去掉背景颜色呢
什么是css盒子模型？
css code是什么
给元素设置圆角半径的css属性是什么
css如何实现不显示table的边框
css如何设置表格间距
css选择器学习之聊聊复合选择器（详细介绍）
css两个冒号什么意思
css如何设置字体下划线
css实现文本图标对齐的方法
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » css如何实现开关效果
