使用纯css实现开关效果
发布时间：2019-07-12 14:06:34 作者：佚名 
我要评论
我要评论这篇文章主要介绍了使用纯css实现开关效果,需要的朋友可以参考下
首先是构思
我们使用<input type="checkbox">标签来实现这个效果。
checkbox的选中、未选中的特性，刚好对应开关的打开、关闭
on:打开 off:关闭
<label for="ck2"> <input type="checkbox" id="ck2"> <span>未选中，则关闭开关</span> </label> <br> <label for="ck1"> <input type="checkbox" id="ck1" checked> <span>选中，则打开开关</span> </label>
开始画出off、on状态的草图
这里要讲解一下，使用了position来实现的定位。有不了解的同学可以打开MDN查看相关知识
<P>off状态草图</P>
<div class="toggle">
<div class="cookie"></div>
</div>
<br>
<P>on状态草图</P>
<div class="toggle2">
<div class="cookie2"></div>
</div>
.toggle{
display:inline-block;
position:relative;
height:25px;
width:50px;
border-radius:4px;
background:#CC0000;
}
.cookie{
position:absolute;
left:2px;
top:2px;
bottom:2px;
width:50%;
background:rgba(230,230,230,0.9);
border-radius:3px;
}
.toggle2{
display:inline-block;
position:relative;
height:25px;
width:50px;
padding:2px;
border-radius:4px;
background:#66CC33;
}
.cookie2{
position:absolute;
right:2px;
top:2px;
bottom:2px;
width:50%;
background:rgba(230,230,230,0.9);
border-radius:3px;
}
然后我们将这两个草图放到label内
<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
<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隐藏起来哦
可以点击预览 https://codepen.io/Ritr/pen/W...
另外我还优化了一个动画版
https://codepen.io/Ritr/pen/L...
总结
以上所述是小编给大家介绍的使用纯css实现开关效果,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
相关文章
这篇文章主要介绍了如何用css3实现switch组件的方法的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-02-09
CSS3实现的创意互动式开关切换按钮特效源码是一段实现了多组创意的CSS3动画按钮特效，如：白天黑夜、难过开心、高亮等等，非常实用，欢迎有需要的朋友前来下载使用2018-01-26
CSS3美化单选/复选/开关按钮样式特效源码是一款纯CSS3的单选框，复选框，开关按钮UI库，实现了按钮可选和按钮不可选的效果，非常不错，欢迎有需要的朋友前来下载使用2017-12-21
这是一款基于纯CSS3实现漂亮的点击开关切换动画效果源码。界面上的开关按钮点击时可呈现出带有弹性翻牌动作的动画视觉效果2017-11-02
纯CSS3实现的炫酷checkbox复选框美化库checkboxes.css(含开关按钮美化
checkboxes.css是一款纯CSS3炫酷checkbox复选框美化库。checkboxes.css可以通过在HTML代码中简单的class配置，生成多种不同效果的checkbox美化样式，其中包括复选框按钮美2017-09-05
这是一款基于纯css3实现的仿窗帘拉开关闭百叶窗动画特效源码。右侧有两个下拉杆，可点击控制百叶窗的打开与折叠收起等动画效果。2017-06-22- 这篇文章主要为大家详细介绍了CSS3模拟IOS滑动开关效果,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-09-28
本特效是一组使用CSS3制作的精美滑动开关按钮效果的代码，这组滑动按钮按Bootstrap的情景类来设计，可以适应5种不同的场景2016-09-23
本源码是一个使用纯CSS3制作的滑动开关按钮特效的代码。使用伪元素来制作外观，制作出4种安卓样式特效2016-04-07
是一款可以使用鼠标来控制开关滑动，按钮开关滑动时带有很炫的动画和渐变效果的代码，本段代码适应于所有网页使用，有兴趣的朋友们可以前来下载使用2015-10-15
最新评论