利用html＋css实现一个动态按钮效果

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

hello我的朋友

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

阅读量481

点赞数 2

文章标签： html css 前端

本文链接：https://blog.csdn.net/weixin_62394372/article/details/125685478

版权

废话不多说代码如下

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            input[type="checkbox"]{
                /* 浏览器兼容 */
                -webkit-appearance:none;
                -moz-appeaarance:none;
                -o-appearance:none;
                -ms-appearance:none;
                appearance:none;
                /* ================ */
                width:100px;
                height:40px;
                border-radius: 20px;
                border: 1px solid #222;
                position: relative;
                transition: 1s;
                /* 去掉默认边框 */
                outline: none;
            }
            input[type="checkbox"]::after{
                position: absolute;
                left: 1px;
                top: 1px;
                display: block;
                content: "";
                width: 36px;
                height: 36px;
                border-radius: 50%;
                background-color: #55aa7f;
                box-shadow: 0 0 4px rgba(0, 0, 0, .4);
                transition: 1s;
            }
            input[type="checkbox"]:checked{
                background-color: #2de;
            }
            input[type="checkbox"]:checked::after{
                background-color: #aa55ff;
                left: 61px;
            }
        </style>
    </head>
    <body>
        <input type="checkbox" >
    </body>
</html>