div+css实现发光开机关机checkbox开关按钮效果代码-html代码-BFW代码库

div+css实现发光开机关机checkbox开关按钮效果代码

代码语言：html

代码描述：div+css实现发光开机关机checkbox开关按钮效果代码

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />

     <style>
          body{
         padding: 100px;
         background: black;
     }
        #checkbox {
  display: none;
}

.switch {
  position: relative;
  width: 70px;
  height: 70px;
  background-color: rgb(99, 99, 99);
  border-radius: 50%;
  z-index: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgb(126, 126, 126);
  box-shadow: 0px 0px 3px rgb(2, 2, 2) inset;
}
.switch svg {
  width: 1.2em;
}
.switch svg path {
  fill: rgb(48, 48, 48);
}
#checkbox:checked + .switch {
  box-shadow: 0px 0px 1px rgb(151, 243, 255) inset,
    0px 0px 2px rgb(151, 243, 255) inset, 0px 0px 10px rgb(151, 243, 255) inset,
    0px 0px 40px rgb(151, 243, 255), 0px 0px 100px rgb(151, 243, 255),
    0px 0px 5px rgb(151, 243, 255);
  border: 2px.........完整代码请登录后点击上方下载按钮下载查看