HTML_CSS使用过渡实现按钮开关效果

狂飙的肥兔

于 2022-01-08 17:41:54 发布

阅读量720

点赞数 3

文章标签： html css3 css

本文链接：https://blog.csdn.net/weixin_43417844/article/details/122383555

版权

效果演示

在这里插入图片描述

完整代码

<!DOCTYPE html>
<html lang="en">
<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">
    <title>Document</title>
    <style>
        input{
			/* 清除控件默认样式 */
            appearance: none;
            width: 80px;
            height: 40px;
            background: #d6d6d6;
            border-radius: 40px;
            transition: 1s;
        }
        input::after{    
			/* 这是那个白色的圆形 */
            content: "";
            display: block;
            transition: 1s;
            width: 40px;
            height: 40px;
            background: white;
            border-radius: 50%;
            box-shadow: 2px 0 2px rgba(0, 0, 0, 0.363);
        }

        input:checked{
            background: #40d940;
        }
        /* 点击input之后圆移动位置 */
		/* 为什么再次点击之后会变回原来的样式呢？
		 这是因为这是一个多选框，第一次点击是选中，再点击一次就是取消选中了。所以样式就变回去了。*/
		 /* 可以自己单独写一个多选框试试，它的效果是第一次点击出现一个对号，再点击一次对号就没了(也就是取消选择了) */
       input:checked::after{
            margin-left: 40px;
            box-shadow: -2px 0 2px rgba(0, 0, 0, 0.363);
        }
    </style>
</head>
<body>
    <form>
        <input type="checkbox">
    </form>
</body>
</html>