switchery实现icheckbox美化成os7开关效果代码-html代码-BFW代码库

switchery实现icheckbox美化成os7开关效果代码

代码语言：html

代码描述：switchery实现icheckbox美化成os7开关效果代码

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

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style>
        * {
          margin: 0;
          padding: 0;
        }
        
        ::selection {
          background: #fe6b95;
          color: #fff;
        }
        
        ::-moz-selection {
          background: #fe6b95;
          color: #fff;
        }
        
        
        
        .download {
          background-position: 0 0;
        }
        
        .fork {
          background-position: 0 -24px;
        }
        
        /**
         *
         * Code snippets.
         *
         */
        
        pre {
          background-color: #fdf6e3;
          box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
          font-family: 'Source Code Pro', Arial, Helvetica, sans-serif;
          font-size: 0.9em;
          margin: 20px 0 20px 3px;
          overflow: auto;
          padding: 10px;
          white-space: nowrap;
          word-wrap: break-word;
        }
        
        .script,
        .tag {
          color: #586e75;
        }
        
        .quote,
        .comment {
          color: #93a1a1;
        }
        
        .specials {
          color: #268bd5;
        }
        
        .attribute {
          color: #708284;
        }
        
        .value {
          color: #269186;
        }
        
        .boolean {
          color: #c58b1e;
        }
        
        .single {
          color: #859900;
        }
        
        .check-state {
          margin: 0 50px 20px 0;
        }
        
        .check-state:last-child {
          margin-right: 0;
        }
        
        .check-state > .button,
        .dynamic-state > .button {
          margin-left: 10px;
          padding: 4px 15px;
        }
        
        .check-state > .check-change {
          background-color: #fdf6e3;
          box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
          color: #635eb0;
          display: inline-block;
          height: 22px;
          padding-top: 4px;
          text-align: center;
          vertical-align: middle;
          width: 52px;
        }
        
        /**
         *
         * Media queries.
         *
         */
        
        @media (max-width: 1024px) {
        
          .header,
          .container,
          .footer {
            animation: none;
        
            -webkit-animation: none;
            -moz-animation: none;
            -ms-animation: none;
            -o-animation: none;
          }
        
        }
        
        @media (max-width: 1010px) {
        
          h2 {
            margin-bottom: 25px;
          }
        
          .header {
            padding-top: 25px;
          }
        
          .header,
          .container,
          .footer {
            width: 95%;
          }
        
          .section-list li p {
            display: block;
            margin: 8px 0 0 20px;
          }
        
          .footer {
            padding-bottom: 25px;
          }
        
          .footer .left {
            width: 40%;
          }
        
          .footer .right {
            width: 60%;
          }
        
        }
        
        @media (max-width: 767px) {
        
          .footer .left {
            margin-bottom: 25px;
            text-align: center;
            width: 100%;
          }
        
          .footer .right {
            text-align: center;
            width: 100%;
          }
        
        }
        
        @media (max-width: 568px) {
        
          h1 {
            font-size: 2.8em;
          }
        
          h2 {
            font-size: 1.1em;
            line-height: 1em;
          }
        
          .description {
            padding-right: 10px;
          }
        
          .description > .button {
            margin-top: 30px;
            position: static;
          }
        
          .description > .button:hover {
            padding-right: 30px;
          }
        
        }
        
        @media (max-width: 480px) {
        
          .container {
            padding-left: 0;
          }
        
          .section {
            padding-left: 15px;
            padding-right: 15px;
          }
        
          .section h3 {
            box-sizing: border-box;
            padding-left: 15px;
        
            -webkit-box-s.........完整代码请登录后点击上方下载按钮下载查看