纯CSS3代码实现滑动开关效果

时间:2021-05-18

废话不多说了,炫下效果图并附上演示和源码下载。

实现效果如下:

查看演示 源码下载

HTML结构代码:

CSS代码:

.ui-switch {position: absolute;font-size: .16rem;right:0.07rem;top: 50%;margin-top: -0.16rem;width: .7rem;height: .3rem;line-height: .3rem;}.ui-switch input {width: .7rem;height: .3rem;position: absolute;top: 0;left: 0;z-index: 2;border: 0;background: 0 0;-webkit-appearance: none;outline: 0}.ui-switch input:before {content: '';width: .68rem;height: .3rem;border: 1px solid #dfdfdf;background-color: #fdfdfd;border-radius: .2rem;cursor: pointer;display: inline-block;position: relative;vertical-align: middle;-webkit-box-sizing: content-box;box-sizing: content-box;border-color: #dfdfdf;-webkit-box-shadow: #dfdfdf 0 0 0 0 inset;box-shadow: #dfdfdf 0 0 0 0 inset;-webkit-transition: border .4s,-webkit-box-shadow .4s;transition: border .4s,box-shadow .4s;-webkit-background-clip: content-box;background-clip: content-box}.ui-switch input:checked:before {border-color: #64bd63;-webkit-box-shadow: #64bd63 0 0 0 0.16rem inset;box-shadow: #64bd63 0 0 0 0.16rem inset;background-color: #64bd63;transition: border .4s,box-shadow .4s,background-color 1.2s;-webkit-transition: border .4s,-webkit-box-shadow .4s,background-color 1.2s;background-color: #64bd63}.ui-switch input:checked:after {left: .4rem}.ui-switch input:after {content: '';width:.3rem;height: .3rem;position: absolute;top: 50%;left: 0;-webkit-transform:translateY(-50%);border-radius: 100%;background-color: #fff;-webkit-box-shadow: 0 0.01rem 0.03rem rgba(0,0,0,.4);box-shadow: 0 0.01rem 0.03rem rgba(0,0,0,.4);-webkit-transition: left .2s;transition: left .2s}

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章