input[type=“checkbox“] 美化CheckBox

最新推荐文章于 2024-04-26 22:14:41 发布

fastrack_0706

最新推荐文章于 2024-04-26 22:14:41 发布

阅读量195

点赞数

分类专栏： web前端文章标签： css html html5

本文链接：https://blog.csdn.net/fastrack_15233866884/article/details/115105450

版权

web前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			@keyframes cb_after {
				from {
					opacity: 0;
					height: 0;
				}

				to {
					opacity: 1;
					height: 50px;
				}
			}

			@keyframes cb_before {
				from {
					opacity: 0;
					height: 0;
				}

				to {
					opacity: 1;
					height: 130px;
				}
			}

			body {
				width: 100%;
				height: 100%;
			}

			.checkbox-warp {
				width: 100px;
				height: 100px;
				margin: 100px auto;
			}

			.checkbox-warp input[type="checkbox"] {
				display: none;
			}

			.checkbox-warp label {
				position: relative;
				display: block;
				width: 100%;
				height: 100%;
				border: 15px solid #000000;
			}

			.checkbox-warp label::after,
			.checkbox-warp label::before {
				position: absolute;
				content: "";
				display: block;
				width: 20px;
				background-color: #36AB19;
				border-radius: 5px;
				transform-origin: left top;
			}

			.checkbox-warp label::after {
				left: 6px;
				top: 60px;
				transform: rotate(-55deg);
			}

			.checkbox-warp label::before {
				left: 50px;
				top: 90px;
				box-shadow: 0 0 0 5px #FFFFFF;
				transform: rotate(-145deg);
			}

			.checkbox-warp input[type="checkbox"]:checked+label {
				border-color: #36AB19;
			}

			.checkbox-warp input[type="checkbox"]:checked+label::before {
				animation: cb_before .2s .2s forwards linear;
			}

			.checkbox-warp input[type="checkbox"]:checked+label::after {
				animation: cb_after .2s forwards linear;
			}
		</style>
	</head>
	<body>
		<div class="checkbox-warp">
			<input type="checkbox" id="check-box" />
			<label for="check-box"></label>
		</div>
	</body>
</html>

fastrack_0706

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
input[type=“checkbox“] 美化CheckBox

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> @keyframes cb_after { from { opacity: 0; height: 0; } to { opacity: 1; he...
复制链接

扫一扫