实现switch开关样式

最新推荐文章于 2024-02-16 17:05:36 发布

ACGuan

最新推荐文章于 2024-02-16 17:05:36 发布

阅读量560

点赞数 1

分类专栏： CSS

本文链接：https://blog.csdn.net/csdnlinyongsheng/article/details/107664968

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css" media="screen">
		.switch {
            width: 57px;
            height: 28px;
            position: relative;
            border: 1px solid #dfdfdf;
            background-color: #fdfdfd;
            box-shadow: #dfdfdf 0 0 0 0 inset;
            border-radius: 20px;
            background-clip: content-box;
            display: inline-block;
            -webkit-appearance: none;
            user-select: none;
            outline: none;
        }
        .switch:before {
            content: '';
            width: 26px;
            height: 26px;
            position: absolute;
            top: 0;
            left: 0;
            border-radius: 20px;
            background-color: #fff;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
        }
        .switch:checked {
            border-color: #64bd63;
            box-shadow: #64bd63 0 0 0 16px inset;
            background-color: #64bd63;
        }
        .switch:checked:before {
            left: 30px;
        }
        .switch.switch-anim {
            transition: border cubic-bezier(0, 0, 0, 1) 0.4s, box-shadow cubic-bezier(0, 0, 0, 1) 0.4s;
        }
        .switch.switch-anim:before {
            transition: left 0.3s;
        }
        .switch.switch-anim:checked {
            box-shadow: #64bd63 0 0 0 16px inset;
            background-color: #64bd63;
            transition: border ease 0.4s, box-shadow ease 0.4s, background-color ease 1.2s;
        }
        .switch.switch-anim:checked:before {
            transition: left 0.3s;
        }
	</style>
</head>
<body>
	<input class="switch switch-anim" type="checkbox" onclick="checkNum()" checked>
	<script>

		function checkNum(){
			var switchAnim = document.querySelector(".switch-anim");
			if(switchAnim.checked == true){
				console.log("选中");
			}
			else{
				console.log("没选中");
			}

        }
	</script>
</body>
</html>

ACGuan

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
实现switch开关样式

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css" media="screen"> .switch { width: 57px; height: 28px; position:.
复制链接

扫一扫