svg+css实现自定义checkbox选中图标美化效果代码-html代码-BFW代码库

代码语言：html

代码描述：svg+css实现自定义checkbox选中图标美化效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


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

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500&display=swap");
body {
  height: 100vh;
  display: flex;
  margin: 0;
  justify-content: center;
  align-items: center;
  font-family: "Open Sans", sans-serif;
}

.container {
  padding: 12em 0em;
}

.check {
  position: relative;
  margin-bottom: 16px;
  overflow: hidden;
  padding: 0em 0.5em;
}
.check input[type=checkbox] {
  position: absolute;
  left: -100%;
  transform: translateX(-100%);
}
.check input[type=checkbox]:focus-visible + label {
  outline: 2px solid #04a3ef;
  outline-offset: 3px;
}
.check input[type=checkbox]:active + label {
  top: 2px;
  position: relative;
}
.check input[type=checkbox]:checked + label svg {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}
.check > span {
  display: inline-flex;
  align-items: center;
}

.fake-checkbox {
  width: 30px;
  height: 30px;
  display: inline-block;
  border: 2px solid #ddd;
  margin-right: 12px;
  border-radius: 3px;
  position: relative;
}

label {
  display: inline-flex;
  align-items: center;
  border-radius: 3px;
  font-size: 20px;
  padding: 1em;
  margin: 8px 0px;
  border-radius: 6px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.06);
}
label svg {
  opacity: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform: rotate(-30deg) scale(0.8);
}
</style>

</head>

<body  >
  <div class="container">
	<div class="check">
		<input type="checkbox" id="its-friday" />
		<label for="its-friday" class="label">
			<span class="fake-checkbox">
				<svg viewBox="0 0 148.933 150">
					<path d="M4.042,41.133c4.491-17.1,14.251-31.471,29.15-37.293,14.2-6.157,33.348-4.154,48.41.692,15.058,4.92,25.051,12.794,30.97,23.61,5.89,10.779,7.886,24.964,4.773,40.143a76.941,76.941,0,0,1-24.894,42.58c-13.383,11.562-32.469,18.921-49.289,12.476C26,116.985,14.379,102.97,7.6,88.52,1.011,73.787-.664,59.023,4.042,41.133Z" transform="translate(5.786 0)" fill="#f25022" fill-rule="evenodd" />
					<path d="M7.909,77.21C3.3,60.139,4.626,42.777,14.638,30.233,23.881,17.749,41.457,9.841,56.906,6.453,72.39,3.132,84.953,4.918,95.449,11.3c10.452,6.369,19.224,17.65,24.062,32.361a77.354,77.354,0,0,1-.423,49.412c-5.849,16.751-18.727,32.735-36.491,35.625-18.023,3.138-35.043-3.149-48.088-12.247C21.494,107.016,12.71,95.072,7.909,77.21Z" transform="translate(22.836 20.481)" fill="#ef03e7" fill-rule="evenodd" />
					<path d="M53.566,6.666c17.122-4.3,34.414-2.594,46.713,7.8,12.255,9.616,19.772,27.566,22.822,43.27,2.986,15.738,5.565,26.448-1.028,36.93-6.573,10.441-25.376,20.518-40.153,25.1-14.882,4.644-30.009,5.388-46.534-.948C18.8,112.55,3.133,99.182.628,81.148c-2.752-18.3,3.88-35.389,13.231-48.394C23.548,19.78,35.649,11.147,53.566,6.666Z" transform="translate(0 19.007)" fill="#ffb900" fill-rule="evenodd" />
					<path d="M73.627,122.124c-17.619,2.868-31.679-2.912-44.477-12.55C16.44,100.71,10.865,86.581,6.961,71.148c-3.84-15.47-2.507-28.177,3.461-38.966C16.374,21.438,27.259,12.214,41.688,6.829A75.761,75.761,0,0,1,90.732,5.52c16.827,5.3,33.138,17.7,36.626,35.48,3.75,18.032-1.893,35.381-10.464,48.83C107.985,103.27,91.765,119.188,73.627,122.124Z" transform="translate(20.394 8.772)" fill="#00a4ef" fill-rule="evenodd" />
					<path d="M70.7,3.086c17.563-.059,33.871,5.718,43.311,18.7,9.579,12.222,12.615,31.368,11.866,47.275-.822,15.923-5.269,27.816-14.109,36.374-8.813,8.519-22.418,14-37.78,14.9a75.872,75.872,0,0,1-47.278-13.2C12.154,97.116.158,80.451,1.985,62.422,3.639,44.075,14.071,29.145,26.177,18.81,38.6,8.588,52.326,3.133,70.7,3.086Z" transform="translate(7.659 13.125)" fill="#03f119" fill-rule="evenodd" />
					<path d="M75.656,41.867v0a12.252,12.252,0,0,1-12.2,12.294H54.2v9.21a12.405,12.405,0,0,1-12.36,12.449h0a12.406,12.406,0,0,1-12.36-12.449V54.058H19.917A12.252,12.252,0,0,1,7.711,41.764v0A12.25,12.25,0,0,1,19.917,29.468h9.511V20.254A12.408,12.408,0,0,1,41.79,7.8h0a12.4,12.4,0,0,1,12.36,12.449v9.317h9.3A12.254,12.254,0,0,1,75.656,41.867Z" transform="translate(32.797 33.195)" fill="#fff" fill-rule="evenodd" />
				</svg>
			</span>
			<span>It's Friday 🥳</span>
		</label>
	</div>

	<div class="check">
		<input type="checkbox" id="its-was-good" />
		<label for="its-was-good" class="label">
			<span class="fake-checkbox">
				<svg viewBox="0 0 148.933 150">
					<path d="M4.042,41.133c4.491-17.1,14.251-31.471,29.15-37.293,14.2-6.157,33.348-4.154,48.41.692,15.058,4.92,25.051,12.794,30.97,23.61,5.89,10.779,7.886,24.964,4.773,40.143a76.941,76.941,0,0,1-24.894,42.58c-13.383,11.562-32.469,18.921-49.289,12.476C26,116.985,14.379,102.97,7.6,88.52,1.011,73.787-.664,59.023,4.042,41.133Z" transform="translate(5.786 0)" fill="#f25022" fill-rule="evenodd" />
			.........完整代码请登录后点击上方下载按钮下载查看