css实现立体led圆灯点击打开关闭效果代码-html代码-BFW代码库

css实现立体led圆灯点击打开关闭效果代码

代码语言：html

代码描述：css实现立体led圆灯点击打开关闭效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        body {
          height: 100vh;
          width: 100vw;
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 0;
          gap: 40px;
          background: rgb(220, 220, 220);
        }
        
        .led {
          width: 80px;
          height: 80px;
          border-radius: 100%;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 2px 1px rgba(0, 0, 0, 0.08);
          cursor: pointer;
        }
        
        .led:after {
          display: block;
          content: "";
          width: 60px;
          height: 48px;
          border-radius: 100%;
          margin: 4px auto;
          background: rgb(255, 255, 255);
          background: linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.2) 0%,
            rgba(255, 255, 255, 0.8) 100%
          );
        }
        
        .led-blue {
          background: rgb(0, 103, 175);
          background: linear-gradient(
            0deg,
            rgba(225, 243, 255, 1) 0%,
            rgba(0, 103, 175, 1) 100%
          );
        }
        
        .led-blue.on {
          background: radial-gradient(
            circle,
            rgba(255, 255, 255, 1) 0%,
            rgba(255, 255, 255, 1) 50%,
            rgba(0, 103, 175, 1) 100%
          );
          box-shadow: 0 2px 8px.........完整代码请登录后点击上方下载按钮下载查看