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

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

代码语言：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,.........完整代码请登录后点击上方下载按钮下载查看