纯CSS实现IOS开关效果

最新推荐文章于 2024-04-12 17:01:15 发布

众乐-Ryan

最新推荐文章于 2024-04-12 17:01:15 发布

阅读量2.1k

点赞数

分类专栏： web前端文章标签： web前端

本文链接：https://blog.csdn.net/fendouzhe123/article/details/42490067

版权

web前端专栏收录该内容

42 篇文章 0 订阅

订阅专栏

同事早上展示了一款没有使用js完全使用CSS实现的模仿IOS开关的效果，很有意思。在跟其交流了基本的思路后模仿实现了一下。

基本的原理

利用label与checkbox类型的input的关联关系（点击关联的label引发checkbox不同的状态），然后根据checkbox不同的状态就能去做不同状态下的CSS3动态变换。

实现代码

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
	div.container{
		
	}
	div.bg_con{
		position:relative;
		width: 40px;
		height: 24px;
	}
	div.bg_con input.theHelper{
		display:none;
	}
	div.bg_con label{
		position:relative;
		display: block;
		padding: 1px;
		border-radius: 24px;
		height: 22px;
		background-color: #eee;
		cursor: pointer;
		vertical-align: top;
		-webkit-user-select: none;
		-webkit-transition: all 0.3s ease;
	}
	div.bg_con label:before{
		content: '';
		display: block;
		border-radius: 24px;
		height: 22px;
		background-color: white;
		-webkit-transform: scale(1, 1);
		-webkit-transition: all 0.3s ease;
	}
	div.bg_con label:after{
		content: '';
		position: absolute;
	    top: 50%;
		left: 50%;
		width: 22px;
		height: 22px;
		margin-top: -11px;
		margin-left: -11px;
		display: block;
		border-radius: 100%;
		background-color: white;
		box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.08);
		-webkit-transform: translateX(-9px);
		-webkit-transition: all 0.3s ease;
	}
	input.theHelper:checked~label:after{
		-webkit-transform: translateX(9px);
	}
	input.theHelper:checked~label:before{
		background-color:#4cda64;
	}  
</style>
</head>
<body>
	<div class="container">
		<div class="bg_con">
			<input id="checked_1" type="checkbox" name="checked_1" class="theHelper" />
			<label for="checked_1"></label>
		</div>
	</div>
</body>
</html>

众乐-Ryan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
纯CSS实现IOS开关效果

同事早上展示了一款没有使用js完全使用CSS实现的模仿IOS开关的效果，很有意思。在跟其交流了基本的思路后模仿实现了一下。基本的原理利用label与checkbox类型的input的关联关系（点击关联的label引发checkbox不同的状态），然后根据checkbox不同的状态就能去做不同状态下的CSS3动态变换。实现代码 div.container{ } di
复制链接

扫一扫