自己动手用单纯css与一个input标签实现一个switch开关

用了别人那么久的组件，自己也写一个吧 ?

css代码：

	.switch{
		appearance: none;
		-moz-appearance:button;
		-webkit-appearance: none;
	}
	.switch {
		position: relative;
		margin: 0;
		width: 40PX;
		height: 24PX;
		border: 1PX solid #EBEBF9;
		outline: 0;
		border-radius: 16PX;
		box-sizing: border-box;
		background-color: #EBEBF9;
		-webkit-transition: background-color 0.1s, border 0.1s;
		transition: background-color 0.1s, border 0.1s;
	}

	.switch:before {
		content: " ";
		position: absolute;
		top: 0;
		left: 0;
		width: 38PX;
		height: 22PX;
		border-radius: 19PX;
		background-color: #EBEBF9;
		-webkit-transition: -webkit-transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
		transition: -webkit-transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
		transition: transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
	}

	.switch:after {
		content: " ";
		position: absolute;
		top: 0;
		left: 1px;
		width: 22PX;
		height: 22PX;
		border-radius: 15PX;
		background-color: #FFFFFF;
		/*box-shadow: 0 1PX 3PX rgba(0, 0, 0, 0.4);*/
		-webkit-transition: -webkit-transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
		transition: -webkit-transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
		transition: transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
	}

	.switch:checked{
		background: #00D287;
		border: solid 1px #00D287;
	}

	.switch:checked:before{
		transform: scale(0);
	}

	.switch:checked:after{
		transform: translateX(15PX);
	}

html代码：

效果如下图：