按钮开关demo

最新推荐文章于 2024-06-11 02:51:38 发布

weixin_30416497

最新推荐文章于 2024-06-11 02:51:38 发布

阅读量150

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lillian0106/p/6972852.html

本文介绍了一个使用纯CSS实现的开关按钮样式案例，包括详细的代码实现和效果展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

源码如下：    
<style>
        .container{ margin: 0px;padding: 100px 250px;}
        .switch-test{
            -webkit-appearance: none;
            appearance: none;
            position: relative;
            width: 52px;
            height: 32px;
            border: 1px solid #DFDFDF;
            outline: 0;
            border-radius: 16px;
            box-sizing: border-box;
            font-weight:bold;">#DFDFDF;
            -webkit-transition: background-color 0.1s, border 0.1s;
            transition: background-color 0.1s, border 0.1s;
        }
        .switch-test:before{
            content: " ";
            position: absolute;
            top: 0;
            left: 0;
            width: 50px;
            height: 30px;
            border-radius: 15px;
            font-weight:bold;">#FDFDFD;
            -webkit-transition: -webkit-transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
            transition: -webkit-transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
            transition: transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
            transition: transform 0.35s cubic-bezier(0.45, 1, 0.4, 1), -webkit-transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
        }
        .switch-test:after{
            content: " ";
            position: absolute;
            top: 0;
            left: 0;
            width: 30px;
            height: 30px;
            border-radius: 15px;
            font-weight:bold;">#FFFFFF;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
            -webkit-transition: -webkit-transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
            transition: -webkit-transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
            transition: transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
            transition: transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35), -webkit-transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
        }
        .switch-test:checked{
            border-color: #00cc99;
            font-weight:bold;">#00cc99;
        }
        .switch-test:checked:before{
            -webkit-transform: scale(0);
            transform: scale(0);
        }
        .switch-test:checked:after{
            -webkit-transform: translateX(20px);
            transform: translateX(20px);
        }
    </style>
</head>
<body>
<div class="container">
    <input class="switch-test" type="checkbox"/>
</div>
</body>
效果截图如下：