通过css控制背景主题样式

通过css控制背景主题样式_第1张图片
通过css控制背景主题样式_第2张图片

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.box {
			width: 100px;
			height: 100px;
			background-color: #f4f4f4;
			transition: all 1s;
		}

		#icons::after {
			content: '';
			transition: all 1s;
		}

		/* 选中后 会设置.box样式 */
		#checkBox:checked+.box {
			width: 100px;
			height: 100px;
			background-color: black;
			transition: all 1s;
		}

		#checkBox:checked+.box #icons::after {
			content: '';
			transition: all 1s;
		}
	</style>
</head>

<body>
	<input id="checkBox" type="checkbox">

	<div class="box">
		<div id="icons"></div>

	</div>

</body>

</html>

你可能感兴趣的:(css,前端)