使用css3 制作switch开关

使用css3来实现switch开关的效果：

html代码：

<div class="switch-btn">
　　<input type='checkbox' id='switchs' checked class='switch-checkbox'>
　　<label for='switchs' class='switch-left'></label>
　　<label for='switchs' class='switch-right'></label>
</div>

label标签for属性的作用：将for属性值与input 中id值相等的标签关联起来，当点击label标签时，如radio，checkbox会随之选中或者不选中

css代码:

.switch-btn{
　　position: relative;
}
.switch-btn .switch-checkbox{
　　display:none;
}
.switch-btn .switch-left{
　　display: block;
　　width: 1.5rem;
　　height: 1.5rem;
　　left: 1.5rem;
　　top: 0;
　　border-radius: 50%;
　　position: absolute;
　　transition: 0.4s;
　　background: #fff;
　　z-index: 1;
　　box-shadow: 1px 1px 2px #ccc;
}
.switch-btn .switch-checkbox:checked + .switch-left{
　　left:0px;
　　box-shadow:-1px 1px 2px #ccc;
}

.switch-btn .switch-right{
　　display: block;
　　width: 3rem;
　　top: 0;
　　height: 1.5rem;
　　border-radius: 1rem;
　　transition: 0.4s;
　　background: #999;
　　position: absolute;
}
.switch-btn .switch-checkbox:checked + .switch-left + .switch-right{
　　background: #04BE02;
　　transition:0.4s;
}

transform（变形，转换）http://www.w3school.com.cn/cssref/pr_transform.asp

transform的属性包括：rotate() / skew() / scale() / translate(,) ，分别还有x、y之分，比如：rotatex() 和 rotatey() ，translateX和translateY以此类推。

transition（过渡）http://www.w3school.com.cn/css3/css3_transition.asp

transition的属性值包括：transition-property(过渡属性名 all 必填),transition-duration(过渡周期时间 0.3s 必填),transition-timing-function(过渡方式 ease 必填),transition-delay(延迟时间选填)

说明：.switch-checkbox:checked + .switch-left （.switch-checkbox 被选中的时候后面的兄弟元素设置.switch-left样式）

http://www.w3school.com.cn/cssref/selector_gen_sibling.asp

//使用onchange事件，获取当前是否是checked

var checkSwitch= document.getElementById('switchs');
checkSwitch.onchange=function(event){
　　console.log(event.target.checked);
}

</script>

巴特西

使用css3 制作switch开关

最新文章

热门文章