如何用css3实现switch组件开关的方法

互联网   02-09 15:26:40   作者:一英尺卷烟   我要评论
这篇文章主要介绍了如何用css3实现switch组件的方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
本文介绍了用css3实现switch组件的方法,分享给大家,具体如下: 基于表单的checkbox 效果图 原理 checkbox, 有两种状态, 没选中和选中, 当选中的时候(:checked), 改变样式即可, 首先得清除浏览器默认的样式, apperance: none, 本文代码只在chrome中运行, 如果需要写兼容性代码, 给apperance和transition加上前缀就好 html代码
<input class='switch-component' type='checkbox'>
css代码
// switch组件 .switch-component { position: relative; width: 60px; height: 30px; background-color: #dadada; border-radius: 30px; border: none; outline: none; -webkit-appearance: none; transition: all .2s ease; } // 按钮 switch-component::after { content: ''; position: absolute; top: 0; left: 0; width: 50%; height: 100%; background-color: #fff; border-radius: 50%; transition: all .2s ease; } // checked状态时,背景颜色改变 .switch-component:checked { background-color: #86c0fa; } // checked状态时,按钮位置改变 .switch-component:checked::after { left: 50%; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
  1. Tag:CSS3   switch组件   开关  

相关文章

  1. 纯CSS3代码实现switch滑动开关按钮效果
    今天小编给大家带来一个小demo,使用纯css3代码实现switch滑动开关按钮效果,非常实用,感兴趣的朋友可以参考下
    2016-08-30
  2. 使用CSS3编写类似iOS中的复选框及带开关的按钮
    这篇文章主要介绍了使用CSS3编写类似iOS中的复选框及带开关的按钮,需要的朋友可以参考下
    2016-04-11
  3. js结合css3实现100种不同图片切换插件pageSwitch源码
    适用于全屏切换场景,即一切一屏,并且实现了超过一百种切换效果,可支持滑动鼠标滚轮进行图片切换效果。 本段代码适应于所有网页使用
    2015-07-09
  4. 纯css实现一款仿ios7的switches开关按钮
    这篇文章主要为大家介绍了纯css实现的一款仿ios7的switches开关按钮,无需引js代码。在实现中给出了两种颜色,三种不同大小的demo,需要的朋友可以参考下
    2014-10-22

最新评论

利发国际手机客户端