css+div布局立体质感通知开启关闭开关按钮代码-html代码-BFW代码库

css+div布局立体质感通知开启关闭开关按钮代码

代码语言：html

代码描述：css+div布局立体质感通知开启关闭开关按钮代码，点击开关有炫酷质感动画。

下面为部分代码预览，完整代码请点击下载或在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{
      margin: 200px;
  }
.toggle-container {
  --bg-top: #ffffff;
  --bg-btm: #182235;
  --bg: #f7f7f7;
  --card: #acb3bf;
  --card-2: #59616c;

  --shadow-dark: #515151;
  --shadow-light: #526d91;

  --primary: #d7f63b;
  --primary-2: #ebdb25;
  --primary-3: #d8b91d;

  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;

  --text: #e2e8f0;
  --muted: #a59c9c;
  --muted-2: #242d3b;
  --ring: rgba(59, 130, 246, 0.55);

  --elev-outer-a: 18px 18px 36px var(--shadow-dark);
  --elev-outer-b: -18px -18px 36px rgba(255, 255, 255, 0.08);

  --card-outer-a: 12px 12px 24px rgba(0, 0, 0, 0.5);
  --card-outer-b: -12px -12px 24px rgba(255, 255, 255, 0.06);

  --switch-outer-a: 6px 6px 12px rgba(0, 0, 0, 0.45);
  --switch-outer-b: -6px -6px 12px rgba(255, 255, 255, 0.07);

  --ao-rim: inset 0 0 0.5px 1px rgba(255, 255, 255, 0.04);
  --shadow-ring: 0 0 0 1px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 310px;
  padding: 35px 25px;
  position: relative;

  background: radial-gradient(
      120% 100% at 0% 0%,
      rgba(255, 255, 255, 0.05) 0%,
      transparent 50%
    ),
    linear-gradient(145deg, var(--bg-top), var(--bg-btm));
  box-shadow:
    inset 2px 2px 2px rgba(0, 0, 0, 0.416),
    -2px -2px 2px rgba(255, 255, 255, 0.438) inset;
  border: 2px solid rgba(255, 255, 255, 0.06);
  backdrop-filter: saturate(110%) blur(0.4px);
  overflow: hidden;
}

.toggle-container::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(
      1px 1px at 25% 30%,
      rgba(255, 255, 255, 0.03) 0,
      transparent 60%
    ),
    radial-gradient(1px 1px at 60% 70%, rgba(0, 0, 0, 0.06) 0, transparent 60%);
  background-size:
    140px 140px,
    180px 180px;
  mix-blend-mode: soft-light;
  opacity: 0.35;
}

.toggle-container::before {
  content: "";
  position: absolute;
  inset: 2px 2px auto 2px;
  height: 44px;
  border-radius: 18px 18px 12px 12px;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0)
  );
  pointer-events: none;
}

.toggle-title {
  color: gray;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.2px;
  margin-bottom: 14px;
}

.toggle-label {
.........完整代码请登录后点击上方下载按钮下载查看