css+svg美化checkbox实现点击开灯关灯开关效果代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：css+svg美化checkbox实现点击开灯关灯开关效果代码

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

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

<head>
  <meta charset="UTF-8">
  

  
  
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

a.source {
  position: fixed;
  top: 1em;
}

svg {
  height: 50vh;
}

.yellow, .yellow .bulb {
  opacity: 0;
}

@keyframes flicker {
  0% {
    opacity: 0.4;
  }
  5% {
    opacity: 0.5;
  }
  10% {
    opacity: 0.6;
  }
  15% {
    opacity: 0.85;
  }
  25% {
    opacity: 0.5;
  }
  30% {
    opacity: 1;
  }
  35% {
    opacity: 0.1;
  }
  100% {
    opacity: 1;
  }
}
#cb {
  display: none;
}
#cb:checked ~ .light .clear {
  display: none;
}
#cb:checked ~ .light .yellow {
  opacity: 1;
}
#cb:checked ~ .light .yellow .bulb {
  animation: flicker 1s;
  -webkit-animation-fill-mode: forwards;
}
@media (prefers-reduced-motion) {
  #cb:checked ~ .light .yellow .bulb {
    animation: none;
    opacity: 1;
  }
}
</style>

  
  
</head>

<body >

<input type="checkbox" id="cb">
<label class="light" for="cb">
	<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
		<defs>
			<style>
				.hide {display: none;}
			</style>
		</defs>
		<rect class="st0" width="1377.339" height="787.079" style="display: none; fill: rgb(255, 255, 255); perspective-origin: 50% 50%;" x="-438.315" y="-141.511"></rect>
		<g transform="matrix(0.49082, 0, 0, 0.49082, -438.081665, -141.36734)" class="clear">
			<path class="st1" d="M1497.5,1160.7h-164c-9.3,0-16.8-7.5-16.8-16.8l0,0c0-9.3,7.5-16.8,16.8-16.8h164c9.3,0,16.8,7.5,16.8,16.8
			l0,0C1514.2,1153.2,1506.7,1160.7,1497.5,1160.7z" style="fill: rgb(0, 42, 71);"></path>
			<path class="st1" d="M1497.5,1213.3h-164c-9.3,0-16.8-7.5-16.8-16.8l0,0c0-9.3,7.5-16.8,16.8-16.8h164c9.3,0,16.8,7.5,16.8,16.8
			l0,0C1514.2,1205.8,1506.7,1213.3,1497.5,1213.3z" style="fill: rgb(0, 42, 71);"></path>
			<path class="st1" d="M1375.7,1233.1c-4.1,0-7.1,3.7-6.4,7.7c4,21.6,22.9,37.9,45.7,37.9s41.7-16.3,45.7-37.9c0.7-4-2.3-7.7-6.4-7.7
			H1375.7z" style="fill: rgb(0, 42, 71);"></path>
			<path class="st1" d="M1480.1,1106.1h-131.6c-22.8,0-42-17.8-43.7-40.6c-5.6-74.2-35.9-121.2-67.9-171
			c-35-54.3-71.1-110.4-71.1-201.2c0-122.6,87.7-225.8,208.5-245.3c28.2-4.6,58-4.2,86.1,1c117.4,22,202.6,124.7,202.6,244.3
			c0,90.8-36.2,146.9-71.1,201.2c-32.1,49.8-62.4,96.8-67.9,171C1522.1,1088.2,1502.9,1106.1,1480.1,1106.1L1480.1,1106.1z
			 M1414.3,477.1c-11.7,0-23.4,0.9-34.9,2.8c-105.1,17-181.3,106.7-181.3,213.4c0,81.3,32,131,66,183.7c32.8,51,66.8,103.7,73,186.1
			c0.4,6,5.5,10.7,11.5,10.7h131.6c6.1,0,11-4.6,11.5-10.7c6.2-82.4,40.2-135.1,73-186.1c33.9-52.7,66-102.4,66-183.7
			c0-104-74.1-193.4-176.2-212.5C1441.3,478.3,1427.8,477.1,1414.3,477.1L1414.3,477.1z" style="fill: rgb(0, 42, 71);"></path>
			<path class="st1" d="M1293.9,849c-5,0-9.9-2.3-13.1-6.7c-89.8-123.4-23.6-239.2-20.7-244c4.5-7.7,14.4-10.3,22.1-5.7
			c7.7,4.5,10.3,14.4,5.8,22.1c-2.5,4.3-58,102.9,19,208.6c5.3,7.2,3.7,17.3-3.6,22.6C1300.5,847.9,1297.2,849,1293.9,849L1293.9,849
			z" style="fill: rgb(0, 42, 71);"></path>
		</g>
		<g transform="matrix(0.49082, 0, 0, 0.49082, -855.081665, -141.36734)" class="yellow">
			<path class="st3 bulb" d="M2262.8,392.2c-5.4,0-9.7-4.3-9.7-9.7v-47.9c0-5.4,4.3-9.7,9.7-9.7s9.7,4.3,9.7,9.7v47.9
			C2272.5,387.9,2268.2,392.2,2262.8,392.2z" style="fill: rgb(255, 203, 0);"></path>
			<path class="st3 bulb" d="M2486.5,484.9c-2.5,0-5-0.9-6.9-2.8c-3.8-3.8-3.8-9.9,0-13.7l33.9-33.9c3.8-3.8,9.9-3.8,13.7,0
			c3.8,3.8,3.8,9.9,0,13.7l-33.9,33.9C2491.5,483.9,2489,484.9,2486.5,484.9L2486.5,484.9z" style="fill: rgb(255, 203, 0);"></path>
			<path class="st3 bulb" d="M2005.2,966.1c-2.5,0-5-0.9-6.9-2.8c-3.8-3.8-3.8-9.9,0-13.7l33.9-33.9c3.8-3.8,9.9-3.8,13.7,0
			c3.8,3.8,3.8,9.9,0,13.7l-33.9,33.9C2010.2,965.2,2.........完整代码请登录后点击上方下载按钮下载查看