CSS small case: switch

HTML code:

	<h4>开关</h4>
	<label class="switch">
		<input type="checkbox" name="switch" checked>
		<span></span>
	</label>

CSS code:

	.switch {cursor: pointer;}
	.switch span {
		display: inline-block;
		width: 36px; height: 20px;
		border-radius: 10px;
		background-color: #999;
		position: relative;
		/* 0.4秒切换背景色 */
		transition: background-color .4s;
	}
	.switch span:before {
		content: '';
		width: 16px; height: 16px;
		border-radius: 50%;
		position: absolute;
		left: 2px; top: 2px;
		background-color: #fff;
		/* 0.4秒切换左边距离 */
		transition: left .4s;
	}
	.switch input {display: none;}
	/* 借助input的checked属性实现切换 */
	.switch input:checked + span {
		background-color: #2979ff;
		/* 0.4秒切换背景色 */
		transition: background-color .4s;
	}
	.switch input:checked + span:before {
		left: 18px;
		/* 0.4秒切换左边距离 */
		transition: left .4s;
	}

Renderings: