div+css实现中性小球水槽滚动开关效果代码-html代码-BFW代码库

div+css实现中性小球水槽滚动开关效果代码

代码语言：html

代码描述：div+css实现中性小球水槽滚动开关效果代码

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

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

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

  
  
  
<style>
:root {
  --light-bg: #EDEDED;
  --dark-bg: #1A1A1A;
  --light: #F2F2F2;
  --dark: #1A1A1A;
  
  --on-light-shadow: inset 0 0 10px 0 rgb(255,255,255,1), 15px -20px 35px 0 rgb(102,210,51,0.56), inset 15px -20px 35px 0 rgb(0,0,0,0.25), -15px 15px 28px 0 rgb(0,0,0,0.25);
  --on-light: radial-gradient(circle at 60% 30%, #ACFF85, #66D233);
  --off-light-shadow: inset 0 0 33px 0 rgb(255,255,255,1), 15px -20px 35px 0 rgb(197,197,197,0.56), inset 15px -20px 35px 0 rgb(0,0,0,0.25), -15px 15px 28px 0 rgb(0,0,0,0.25);
  --off-light: radial-gradient(circle at 60% 30%, #D1D1D1, #DDDDDD);
  --off-red-light-shadow: inset 0 0 18px 0 rgb(255,255,255,1), 15px -20px 35px 0 rgb(255,175,175,0.56), inset 15px -20px 35px 0 rgb(0,0,0,0.25), -15px 28px 28px 0 rgb(0,0,0,0.25);
  --off-red-light: radial-gradient(circle at 60% 30%, #FF7676, #ED5C5C);
  
  
  
  --on-dark-shadow: inset 0 0 19px 0 rgb(0,0,0,1), 15px -20px 38px 0 rgb(102,210,51,0.24), inset 15px -20px 35px 0 rgb(0,0,0,0.25), -15px 15px 28px 0 rgb(0,0,0,0.72);
  --on-dark: radial-gradient(circle at 60% 30%, #91D372, #35651E);
  --off-dark-shadow: inset 0 0 37px 0 rgb(0,0,0,1), 15px -20px 38px 0 rgb(0,0,0,0.14), inset 15px -20px 35px 0 rgb(0,0,0,0.25), -15px 15px 28px 0 rgb(0,0,0,0.25);
  --off-dark: radial-gradient(circ.........完整代码请登录后点击上方下载按钮下载查看