运用css制作一个小开关

---

前言

制作一个小开关

---

一、所涉及的知识点

1、取消掉默认的外观：-webkit-appearance:none;
2、伪元素选择器：input[ type = 'checkbox' ] ::after{ content: "";}在页面上生成一个伪元素
3、设置渐变：background: linear-gradient(to bottom , #d3d3d3 , #9e9e9e);
- linear-gradient表示线性渐变
- 括号内分别为渐变方向，开始颜色，结束颜色
4、阴影的设置：box-shadow:水平位置 垂直位置 模糊程度 扩大范围 颜色 阴影方向;
- box-shadow:0px 2px 5px 1px black inset;
- inset表示阴影向内，默认向外
- 同一个元素允许多个阴影并存，可用逗号隔开
5、transition: width 1s ease-in 2s;
- transition: 要过渡的属性 过渡时间 过渡方式 延迟时间
6、input[ type='checkbox' ]:checked{}; 只能选择所有被勾选了的checked

二、操作步骤

1、先制作开关盒

代码如下（示例）：将复选框的外观样式去除，再进行自行设置

//CSS部分
*{
			margin:0px;
			padding:0px;
		}
		input[type='checkbox']{
			-webkit-appearance:none;
			margin:50px;
			border:10px solid #c1c1c1;
			border-radius:50px;
			width:150px; height:70px;
			background: #888;
		}
		
//HTML部分
<input type="checkbox">

效果展示：

2、制作开关

代码如下（示例）：复选框是一个单标签结构，无法包裹其他元素，所以这时需要使用伪元素选择器，伪元素无标签，写入代码后，会发现伪元素是这个复选框的子元素，因此它们是一个整体

input[type='checkbox']::after{
			content:"";
			display:block;
			width:60px; height:60px;
			position:absolute;
			left:-5px; top:-5px;
			border-radius:30px;
			background: grey;
		}

效果展示：

3、将开关真实化

（1）代码如下（示例）：将伪元素选择器中的background进行修改，为开关设置渐变

background: linear-gradient(to bottom , #d3d3d3 , #9e9e9e);

效果展示：

（2）代码如下（示例）：为开关和开关盒子设置阴影效果，让整个开关看起来更加立体化

input[type='checkbox']{
			-webkit-appearance:none;
			margin:50px;
			border:10px solid #c1c1c1;
			border-radius:50px;
			width:150px; height:70px;
			background: #888;
			position:relative;
			box-shadow:0 0 10px 1px #3f3f3f inset;/* 为盒子添加向内阴影 */
		}
		input[type='checkbox']::after{
			content:"";
			display:block;
			width:60px; height:60px;
			position:absolute;
			left:-5px; top:-5px;
			border-radius:30px;
			background: linear-gradient(to bottom , #d3d3d3 , #9e9e9e);
			box-shadow:0px 2px 2px 0px #eee inset, 2px 1px 2px 0px #333;/* 为开关上部设置向内白色高光，为下部设置向外阴影 */
		}

效果展示：

4、开关滑动，背景改变

（1）代码如下（示例）：选择被勾选了的checkbox，对其进行背景的改变，改变开关的位置，并为开关盒子和开关添加过渡效果

input[type='checkbox']{
			-webkit-appearance:none;
			margin:50px;
			border:10px solid #c1c1c1;
			border-radius:50px;
			width:170px; height:70px;
			background: #888;
			position:relative;
			box-shadow:0 0 10px 1px #3f3f3f inset;/* 为盒子添加向内阴影 */
			transition:0.6s;/* 添加过渡效果 */
		}
		input[type='checkbox']:checked{
			background: #6FB500;/* 对被勾选的checkbox进行背景改变 */
		}
		input[type='checkbox']::after{
			content:"";
			display:block;
			width:60px; height:60px;
			position:absolute;
			left:-5px; top:-5px;
			border-radius:30px;
			background: linear-gradient(to bottom , #d3d3d3 , #9e9e9e);
			box-shadow:0px 2px 2px 0px #eee inset, 2px 1px 2px 0px #333;/* 为开关上部设置向内白色高光，为下部设置向外阴影 */
			transition:0.6s;/* 添加过渡效果 */
		}
		input[type='checkbox']:checked::after{
			left:95px;/* 改变开关的位置，将其移至最右边 */
		}

效果展示：

---