CSS 实现iphone 样式开关_苹果样式开关按钮css-CSDN博客

本文链接：https://blog.csdn.net/jikexueyuan5555/article/details/79376598

本文展示了如何使用纯CSS实现一款类似iPhone样式的开关效果，无需JavaScript。内容包括开关的实现原理和代码展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

极客标签上看到的挺有意思的小demo，用纯css实现（hh，动画能用html+css就不用js)

效果图：

代码：

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <meta http-equiv="X-UA-Compatible" content="IE=edge">  
    <title>聊天</title>  
    <link rel="stylesheet" href="">    
</head>  
<style type="text/css" media="screen">  
		.back{
			width:50px;
			height:25px;
			background-color: #ddd;
			border-radius: 15px;
			display: block;
			/*1.display: block;很重要，因为用来做背景的label是没有内容的*/
			cursor: pointer;
			position: relative;
			/*2.父元素用relative，子元素用absolute，使子元素相对父元素定位*/
			transition: all 0.3s ease;
			/*背景变绿的特效*/
		}
		.back:after{
			content:'';
			/*3.除了有content还要有display，不然这个伪类不会出现*/
			display:block;
			width: 25px;
			height: 25px;
			border-radius: 100%;
			background-color: #ffffff;
			box-shadow: 1px 1px 1px black;
			position: absolute;
			top:-1px;
			transition: all 0.3s ease;
		}
		.back:active:after{
			transform: scale(2,0.8);
		}
		.blx:checked~label{
			background-color: #42d842;
			/*4.~代表之后的所有同级指定元素(这里是label)，不一定要挨着但一定要有相同父元素*/
		}
		.blx:checked~label:after{
			left:25px;
		}
		.hidden{
			display: none;
		}

		.blx:disabled~label{
			background-color: #d5d5d5;
			pointer-events: none;
		}
		.blx:disabled~label:after{
			background-color: #bcbdbc;
		}
		.slidep{
			margin: 20px;
		}
</style>  
  
<body>  
    <div class="slidep">
    	<input type="checkbox" id="uncheckbox" class="blx hidden"/>
    	<label for="uncheckbox" class="back"></label>
    </div>
    <div class="slidep">
    	<input type="checkbox" id="discheckbox" class="blx hidden" disabled />
    	<label for="discheckbox" class="back"></label>
    </div>
    <div class="slidep">
    	<input type="checkbox" id="checkedbox" class="blx hidden" checked />
    	<label for="checkedbox" class="back"></label>
    </div>
</body>  
  
</html>