css-动画开关

最新推荐文章于 2023-02-16 15:03:30 发布

echo008

最新推荐文章于 2023-02-16 15:03:30 发布

阅读量463

点赞数

本文链接：https://blog.csdn.net/echo008/article/details/51423968

版权

模仿手机应用里面的应用开关按钮，适用于web-app端。

原生js点击事件监听，css动画效果，相对于直接改变位置降低了生涩感，使体验更加逼真。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>animtion</title>
	<style>
		*{margin:0;padding:0;}
		.out{
			width:80px;
			height:36px;
			background: #fff;
			border:1px solid #f5f5f5;
			margin: 50px auto;
			box-shadow:0 0 6px rgba(100,100,100,.5) inset;
			border-radius: 18px;
			cursor:pointer;
		}
		.in{
			width:36px;
			height:28px;
			margin-top:4px;
			margin-left:8px;
			background:#0cc;
			border-radius: 14px;
			transition: margin-left 0.1s;
		}
	</style>
</head>
<body>
	<div class="out" id="out">
		<div class="in" id="in"></div>
	</div>
	<script>
		var on = true;
		document.getElementById("out").addEventListener("click",function(){
			if(on){
				document.getElementById("in").style.marginLeft = "36px";
				on = false;
			}else{
				document.getElementById("in").style.marginLeft = "8px";
				on = true;
			}
		});
	</script>
</body>
</html>

echo008

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css-动画开关

模仿手机应用里面的应用开关按钮，适用于web-app端。原生js点击事件监听，css动画效果，相对于直接改变位置降低了生涩感，使体验更加逼真。 animtion *{margin:0;padding:0;} .out{ width:80px; height:36px; background: #fff; border:1px solid #f5
复制链接

扫一扫