css+div布局实现led灯开关点击打开关闭checkbox效果代码-html代码-BFW代码库

css+div布局实现led灯开关点击打开关闭checkbox效果代码

代码语言：html

代码描述：css+div布局实现led灯开关点击打开关闭checkbox效果代码

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

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

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

  
  
<style>
:root {
 --base-size: 30px;
 --light-gray: #E7E7EE;
 --dark-gray: #070707;
 --off-color: #404040;
 --red-color: #ff4030;
 --green-color: #40ff80;
 --blue-color: #3040ff;
 --white-color: #f0f0f0;
 --btn-color: #F08020;
 --global-bg: #16171f;
 --hi-light: #ffffff;
 --low-light: #000000;
 --hi-light-off: #555555;
 --shadow-light-fx: 
   inset 0 3px 3px hsl(from var(--hi-light) h s l / 25%),
   inset 0 10px 10px hsl(from var(--hi-light) h s l / 18.75%),
   inset 0 20px 20px hsl(from var(--hi-light) h s l / 12.5%),
   inset 0 30px 30px hsl(from var(--hi-light) h s l / 6.25%),
   inset 0 -3px 3px hsl(from var(--low-light) h s l / 25%),
   inset 0 -10px 10px hsl(from var(--low-light) h s l / 18.75%),
   inset 0 -20px 20px hsl(from var(--low-light) h s l / 12.5%),
   inset 0 -30px 30px hsl(from var(--low-light) h s l / 6.25%),
   0 2px 1px #00000077;
 --shadow-light-off-fx: 
   inset 0 3px 3px hsl(from var(--hi-light-off) h s l / 25%),
   inset 0 10px 10px hsl(from var(--hi-light-off) h s l / 18.75%),
   inset 0 20px 20px hsl(from var(--hi-light-off) h s l / 12.5%),
   inset 0 30px 3.........完整代码请登录后点击上方下载按钮下载查看