纯CSS3实现滑动开关效果

最新推荐文章于 2024-02-04 09:00:00 发布

一喵呜

最新推荐文章于 2024-02-04 09:00:00 发布

阅读量1w

点赞数 1

分类专栏： HTMl5 CSS3 文章标签： html5技术黄艺斌 HTML5 HTML5自由者 css3

本文链接：https://blog.csdn.net/html5_/article/details/47723165

版权

HTMl5 同时被 2 个专栏收录

81 篇文章 0 订阅

订阅专栏

CSS3

35 篇文章 0 订阅

订阅专栏

实现效果如下：

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
}

一喵呜

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
4
评论
纯CSS3实现滑动开关效果

实现效果如下：HTML结构代码： CSS代码：/*表单开关样式*/.ui-switch { position: absolute; font-size: .16rem; right:0.07rem; top: 50%;
复制链接

扫一扫