css实现ios开关效果

代码语言:html

所属分类:表单美化

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no" name="viewport" />
    <style type="text/css">
        .Switch {
            margin-top: auto;
            margin-right: auto;
            margin-left: auto;
            margin-bottom: auto;
            padding: 0;
            width: 100%;
        }
        .Switch li {
            clear: both;
            line-height: 44px;
            border-bottom: 1px solid #CCC;
            list-style: none;
        }
        .Switch input {
            display: none
        }
        .Switch label {
            width: 52px;
            background: #CCC;
            height: 28px;
            border-radius: 14px;
            float: right;
            margin: 8px 10px 0 0;
            box-shadow: 0 1px 2px rgba(0,0,0,.1) inset;
        }
        .Switch label em {
            width: 26px;
            height: 26px;
            float: left;
            margin: 1px;
            border-radius: 13px;
            box-shadow: 2px 3px 8px r.........完整代码请登录后点击上方下载按钮下载查看

网友评论0