HTML部分:
<input class="switch switch-anim" type="checkbox">
CSS部分:
.switch {
width: 35px;
height: 19px;
position: relative;
background-clip: content-box;
display: inline-block;
-webkit-appearance: none;
user-select: none;
outline: none;
box-shadow: #D4D4D4 0px 0px 0px 1px;
border-radius: 40px;
background: rgba(0, 0, 0, 0.15);
overflow: hidden;
cursor: pointer;
user-select: none;
}
.switch:before {
content: '';
position: absolute;
left: 0;
top: 1px;
width: 17px;
height: 17px;
display: inline-block;
border-radius: 20px;
background-color: #fff;
z-index: 20;
-webkit-transition: all .5s;
transition: all .5s;
}
.switch:checked {
border-color:#D83025;
background-color: #D83025;
}
.switch:checked:before {
left: 17px;
}
.switch.switch-anim {
transition: border cubic-bezier(0, 0, 0, 1) 0.4s,
box-shadow cubic-bezier(0, 0, 0, 1) 0.4s;
}
.switch.switch-anim:before {
transition: left 0.3s;
}
.switch.switch-anim:checked {
box-shadow: #D83025 0 0 0 16px inset;
background-color: #D83025;
transition: border ease 0.4s,
box-shadow ease 0.4s, background-color ease 1.2s;
}
.switch.switch-anim:checked:before {
transition: left 0.3s;
}
纯css写开关
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
