HTML5 + CSS3实现app开关样式实现--1

最新推荐文章于 2024-05-16 03:10:36 发布

RunningOnMyWay

最新推荐文章于 2024-05-16 03:10:36 发布

阅读量356

点赞数

分类专栏：前端文章标签： button app开关开关样式

本文链接：https://blog.csdn.net/weixin_43639981/article/details/96280696

版权

前端专栏收录该内容

18 篇文章 1 订阅

订阅专栏

html5代码如下：

<span style="float:right" class="off-btn off-bac"><span class="off-btn2  off1"></span> </span>

<span style="float:right;" class="off-btn off-bac2"><span class="off-btn2  off2"></span> </span>

样式类代码如下：

span.off-btn {
    width: 42px;
    height: 22px;
    border-radius: 22px;
}
span.off-btn2 {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    display: inline-block;
}
span.off-bac {
    background: #cdcdcd;
}
span.off1 {
    margin: 1px 0 1px 1px;
}
span.off-bac2 {
    background: #23c88b;
}
span.off2 {
    float: right;
    margin: 1px 1px 1px 0;
}