switch开关
switch开关表示两种相反状态的切换,适用于触发开关。本文章代码摘自:http://www.css88.com/archives/5693
代码块
纯css实现:
html部分:
<input class="switch switch-animation" type="checkbox">
css部分:
<style>
.switch {
position:relative;
width:52px;
height:31px;
border:1px solid #dfdfdf;
background-color:#fdfdfd;
border-radius:20px;
-webkit-appearance:none;
outline:none;
}
.switch:before {
position:absolute;
top:0;
left:0;
content:'';
width:29px;
height:29px;
border-radius:50%;
background-color: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.switch:checked {
border-color:#64bd63;
box-shadow: #64bd63 0 0 0 16px inset;
background-color: #64bd63;
}
.switch:checked:before {
left:21px;
}
.switch-animation {
transition: background-color ease 0.4s;
}
.switch-animation:before {
transition: left 0.4s;
}
</style>