CSS如何实现手机中开关的实例分析-css教程-PHP中文网

CSS如何实现手机中开关的实例分析

黄舟

发布： 2017-10-21 11:00:06

原创

1827人浏览过

在很多设计图上，会有如下图开关或者单选，今天我就来讲讲如何用css去实现动态的开关。

6ef1c4dc7cf6cefc2ab0bf8038c40092.jpg-wh_

html代码中，是很简单的

<input type="checkbox" id="1" class="checkbox">
<label class="switch" for="1"></label>

登录后复制

下面是我们css代码

通用企业网站系统(.net2.0/div/css/生成html/bbs)2.0 中英文结合版

系统模块主要有：1、网站栏目可以自定义网站栏目，自定义的网站栏目可以分为两个级别层次，当然也可以只做一个层次，设置新网站栏目后编辑网站栏目的内容；默认栏目有些可以关闭和开启。2、物品展示系统与以往网站系统不同的是，该物品展示系统可以从0全部自定义物品的所有参数和信息；因为每种物品的详细参数是不一样的，如手机和笔记本参数完全不一样；可以自定义新物品的参数，然后自定义物品的次级和三级物品分类，大大实现

查看详情

<style>
    .checkbox {
        display: none;
    }
    .switch {
        width: 50px;
        height: 31px;
        background: #56ACFE;
        border-radius: 20px;
        padding: 1px;
        box-sizing: border-box;
        display: inline-block;
        margin-top: 15px;
    }
    .switch:after {
        content: '';
        box-shadow: 0 3px 8px 0 rgba(0,0,0,0.15), 0 1px 1px 0 rgba(0,0,0,0.16), 0 3px 1px 0 rgba(0,0,0,0.10);
        width: 28px;
        height: 28px;
        background: #fff;
        border-radius: 50%;
        display: block;
        margin-left: 1px;
        float: left;
        transition: all 0.5s;
    }
    .checkbox:checked+.switch:after {
        margin-left: 20px;
    }
    .checkbox:checked+.switch {
        background: #ccc;
    }
</style>

登录后复制

立即学习“前端免费学习笔记（深入）”；

就这样，就实现了这个设计图上和手机上经常出现的开关。

以上就是CSS如何实现手机中开关的实例分析的详细内容，更多请关注php中文网其它相关文章！