svg+css实现立体质感月亮按钮暗黑与亮色点击切换效果代码-html代码-BFW代码库

代码语言：html
所属分类：其他
代码描述：svg+css实现立体质感月亮按钮暗黑与亮色点击切换效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >

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

  
  
  
<style>
@import url('https://unpkg.com/normalize.css') layer(normalize);

@layer normalize, base, demo, glows, transitions, trail;

:root {
  --font-size: 48px;
}

@layer trail {
  /* Glow trail is 7 80, 96 array and offset */
  :root {
    --offset: calc(var(--step) * 0.5);
  }
  .trail {
    stroke-dasharray: 10 80;
    stroke-dashoffset: 10;
    opacity: 0;
    transition-property: stroke-dashoffset, opacity;
    transition-duration: calc(var(--step) * 3), calc(var(--step) * 0.5);
    transition-delay: var(--offset), calc(var(--offset) + (var(--step) * 2.5));
    transition-timing-function: var(--ease),
      linear(
        0 0%,
        0.0039 6.25%,
        0.0156 12.5%,
        0.0352 18.75%,
        0.0625 25%,
        0.0977 31.25%,
        0.1407 37.5%,
        0.1914 43.74%,
        0.2499 49.99%,
        0.3164 56.25%,
        0.3906 62.5%,
        0.5625 75%,
        0.7656 87.5%,
        1 100%
      );
  }
  .toggle[aria-pressed='true'] .trail {
    transition: stroke-dashoffset 0s;
    opacity: 1;
    stroke-dashoffset: -70;
  }
  .glow {
    opacity: 1;
    transition-property: opacity;
    transition-duration: 1.25s;
    transition-delay: var(--offset);
    transition-timing-function: linear(
      0 0%,
      0.0039 6.25%,
      0.0156 12.5%,
      0.0352 18.75%,
      0.0625 25%,
      0.0977 31.25%,
      0.1407 37.5%,
      0.1914 43.74%,
      0.2499 49.99%,
      0.3164 56.25%,
      0.3906 62.5%,
      0.5625 75%,
      0.7656 87.5%,
      1 100%
    );
  }
  .toggle[aria-pressed='true'] .glow {
    opacity: 0;
    transition-property: opacity;
    transition-duration: var(--step);
    transition-delay: 0s;
    transition-timing-function: var(--ease);
  }
}

@layer glows {
  .face-plate {
    position: absolute;
    inset: 0;
    border-radius: inherit;
  }

  .face-glowdrop {
    position: absolute;
    inset: 0;
    border-radius: inherit;
  }

  .face-glowdrop::after,
  .face-glowdrop::before {
    content: '';
    height: 50%;
    aspect-ratio: 1;
    background: #fff;
    filter: blur(6px);
    position: absolute;
    z-index: -1;
    border-radius: 50%;
  }

  .face-glowdrop::before {
    left: 4%;
    width: 56%;
    translate: 0 -25%;
  }

  .face-glowdrop::after {
    bottom: 0;
    right: 12%;
    width: 34%;
    translate: 0 20%;
  }

  .face-glows {
    position: absolute;
    inset: -0.075em;
    opacity: 0;
    border-radius: inherit;
    mix-blend-mode: plus-lighter;
    filter: blur(8px);
    z-index: 20;
    -webkit-mask: conic-gradient(from 280deg, #0000, #fff 20deg 45deg, #0000 95deg),
      conic-gradient(from 110deg, #0000, #fff 20deg, #0000 95deg);
            mask: conic-gradient(from 280deg, #0000, #fff 20deg 45deg, #0000 95deg),
      conic-gradient(from 110deg, #0000, #fff 20deg, #0000 95deg);
  }

  .face-glows div {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    filter: blur(4px);
    border: 0.1em solid white;
  }
}

@layer transitions {
  :root {
    --step: 0.5s;
    --ease: linear(
      0 0%,
      0.2342 12.49%,
      0.4374 24.99%,
      0.6093 37.49%,
      0.6835 43.74%,
      0.7499 49.99%,
      0.8086 56.25%,
      0.8593 62.5%,
      0.9023 68.75%,
      0.9375 75%,
      0.9648 81.25%,
      0.9844 87.5%,
      0.9961 93.75%,
      1 100%
    );
  }
  body {
    transition-property: background-color, color;
    transition-duration: var(--step);
    transition-timing-function: var(--ease);
  }
  .socket {
    transition-property: background-color, box-shadow;
    transition-duration: var(--step);
    transition-timing-function: var(--ease);
  }
  .face {
    transition-property: scale;
    transition-duration: var(--step);
    transition-timing-function: var(--ease);
  }
  .outline {
    transition-property: stroke;
    transition-duration: var(--step);
    transition-timing-function: var(--ease);
  }
  .inner-bg {
    fill: black;
    transition-property: fill;
    transition-duration: var(--step);
    transition-timing-function: var(--ease);
  }

  .toggle::before {
    transition-property: scale, opacity;
    transition-duration: var(--step);
    transition-timing-function: var(--ease);
  }

  .face-shadow::after,
  .face-shadow::before {
    transition-property: opacity, translate, filter, scale;
    transition-duration: var(--step);
    transition-timing-function: var(--ease);
  }
  .face-shadow::after {
    scale: 0.5;
  }
  .face-plate {
    transition-property: background-color;
    transition-duration: var(--step);
    transition-timing-function: var(--ease);
  }
  .face-glowdrop {
    scale: 0;
    transition-property: scale;
    transition-duration: var(--step);
    transition-timing-function: var(--ease);
  }
  .socket-shadow,
  .face-glows,
  .face-shine {
    transition-property: opacity;
    transition-duration: var(--step);
    transition-timing-function: var(--ease);
  }
  button:active {
    .socket {
      box-shadow: -0.045em 0.1em 0.2em -0.15em white;
    }
    .face {
      scale: 0.99;
    }
  }
  .glow {
    opacity: 0;
    transition-property: opacity;
    transition-duration: var(--step);
    transition-timing-function: var(--ease);
  }
  .toggle[aria-pressed='true'] {
    .face {
      scale: 1.12;
    }
    .outline {
      stroke: hsl(0 0% 30%);
    }
    .inner-bg {
      fill: hsl(0 0% 20%);
    }
    .socket {
      box-shadow: -0.025em 0.08em 0.2em -0.1em white;
    }
    .glow {
      opacity: 0;
    }
    .face-glowdrop {
      scale: 1;
    }
    &::before {
      scale: 2;
      opacity: 0;
    }
    .face-shadow::before {
      translate: -15% 55%;
      filter: blur(1em);
      opacity: 0.35;
    }
    .face-shadow::after {
      filter: blur(0.5em);
      scale: 1;
    }
    .socket-shadow,
    .face-glows,
    .face-shine {
      opacity: 1;
    }
  }
  .face {
    scale: 1;
  }
}

@layer demo {
  main {
    font-size: var(--font-size);
    scale: 1;
  }
  :root {
    --font-size: 64px;
    --bg-light: hsl(235 5% 85%);
    --bg-dark: hsl(220 27% 6%);
    --button-light: hsl(223 4% 73%);
    --button-dark: hsl(220 27% 6%);
  }
  body {
    background: light-dark(var(--bg-light), var(--bg-dark));
    overflow: hidden;
  }
  button {
    background: #0000;
    font-size: var(--font-size);
    height: 3em;
    padding: 0;
    border-radius: 3em;
    border: 0;
    aspect-ratio: 1.8 / 1;
    position: relative;
    cursor: pointer;
  }
  button::after {
    content: '';
  }
  button :is(.socket, .face) {
    position: absolute;
    border-radius: 3em;
  }
  .toggle::before {
    pointer-events: none;
  }
  /* light mode */
  .socket {
    /* box-shadow: 0 0 0.25rem 0 hsl(0 0% 100% / 0.25); */
    box-shadow: -0.05em 0.1em 0.2em -0.2em white;
    background: light-dark(hsl(0 0% 90%), hsl(0 0% 0%));
    position: relative;
    inset: 0;
  }
  .socket-shadow {
    position: absolute;
    inset: 0 0em;
    opacity: 0;
    border-radius: inherit;
    box-shadow: 0em 0.075em 0.1em 0em white;
  }
  .face {
    inset: 0.15em;
  }

  .toggle::before {
    content: '';
    width: 150vmax;
    height: 200vmax;
    aspect-ratio: 1;
    border-radius: 0%;
    background: radial-gradient(hsl(0 0% 100% / 0.25), hsl(0 0% 0% / 1) 35%);
    position: absolute;
    translate: -50% -65%;
    left: 50%;
    top: 50%;
    z-index: -1;
    opacity: 0.35;
  }

  .face-shadow,
  .face-shadow::after,
  .face-shadow::before {
    position: absolute;
    inset: 0;
    border-radius: inherit;
  }
  .face-shadow::after,
  .face-shadow::before {
    content: '';
  }
  .face-shadow::before {
    background: black;
  }
  .face-shadow::after {
    background: white;
  }

  .face-plate {
    box-shadow: -0.05em 0.1em 0.2em -0.2em white inset;
    background: conic-gradient(from 45deg, #0000, hsl(0 0% 100% / 0.05)),
      light-dark(var(--button-light), var(--button-dark));
  }
  .face-shine {
    position: absolute;
    inset: 0;
    opacity: 0;
    border-radius: 3em;
  }
  .face-shine-shadow {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    -webkit-mask: conic-gradient(
      from 0deg,
      #fff 90deg,
      #0000 110deg 200deg,
      #fff 215deg 280deg,
      #0000 315deg
    );
            mask: conic-gradient(
      from 0deg,
      #fff 90deg,
      #0000 110deg 200deg,
      #fff 215deg 280deg,
      #0000 315deg
    );
    box-shadow: 0.075em 0 0.025em -0.025em hsl(0 0% 0% / 0.5) inset,
      -0.075em -0.05em 0.025em -0.025em hsl(0 0% 0% / 0.5) inset;
  }

  .face-shine::before {
    content: '';
    position: absolute;
    inset: 0.05em;
    border-radius: 3em;
    box-shadow: 0 -0.05em 0.025em -0.025em hsl(0 0% 50% / 0.5) inset,
      -0.025em 0.05em 0.025em -0.025em hsl(0 0% 100% / 0.5) inset;
  }
  .face-shine::after {
    content: '';
    position: absolute;
    inset: 0;
    background: conic-gradient(from 45deg, #0000, hsl(0 0% 100% / 0.25));
    border-radius: 3em;
  }

  .face svg {
    --glow: hsl(182 90% 92%);
    width: 25%;
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -52% -48%;
    overflow: visible !important;
    /* filter: drop-shadow(0 0 0.15em color-mix(in hsl, var(--glow), #0000)); */
  }

  .face svg path {
    transform-box: fill-box;
    transform-origin: center center;
  }

  .glow {
    z-index: 3;
    filter: drop-shadow(0 0 0.2em var(--glow));
    will-change: opacity;
  }

  .trail-holder {
    z-index: 2;
    filter: blur(10px);
    .trail {
      stroke-width: 4;
    }
  }
  .trail {
    stroke-dashoffset: 0;
  }
  .inner-face {
    fill: hsl(230 5% 80%);
  }
  .glow-path {
    fill: var(--glow);
    stroke: var(--glow);
    opacity: 1;
    stroke-width: 0px;
  }
}

@layer base {
  :root {
    --font-size-min: 16;
    --font-size-max: 20;
    --font-ratio-min: 1.2;
    --font-ratio-max: 1.33;
    --font-width-min: 375;
    --font-width-max: 1500;
  }

  html {
    --line: light-dark(hsl(0 0% 10% / 0.3), hsl(0 0% 100% / 0.3));
    color-scheme: light dark;
  }

  [data-theme='light'] {
    --line: hsl(0 0% 10% / 0.3);
    color-scheme: light only;
  }

  [data-theme='dark'] {
    --line: hsl(0 0% 100% / 0.3);
    color-scheme: dark only;
  }

  :where(.fluid) {
    --fluid-min: calc(
      var(--font-size-min) * pow(var(--font-ratio-min), var(--font-level, 0))
    );
    --fluid-max: calc(
      var(--font-size-max) * pow(var(--font-ratio-max), var(--font-level, 0))
    );
    --fluid-preferred: calc(
      (var(--fluid-max) - var(--fluid-min)) /
        (var(--font-width-max) - var(--font-width-min))
    );
    --fluid-type: clamp(
      (var(--fluid-min) / 16) * 1rem,
      ((var(--fluid-min) / 16) * 1rem) -
        (((var(--fluid-preferred) * var(--font-width-min)) / 16) * 1rem) +
        (var(--fluid-preferred) * var(--variable-unit, 100vi)),
      (var(--fluid-max) / 16) * 1rem
    );
    font-size: var(--fluid-type);
  }

  *,
  *:after,
  *:before {
    box-sizing: border-box;
  }

  body {
    display: grid;
    place-items: center;
    min-height: 100vh;
    font-family: 'SF Pro Text', 'SF Pro Icons', 'AOS Icons', 'Helvetica Neue',
      Helvetica, Arial, sans-serif, system-ui;
  }

  body::before {
    --size: 45px;
    /* --line: color-mix(in oklch, canvasText, transparent 70%); */
    content: '';
    height: 100vh;
    width: 100vw;
    position: fixed;
    background: linear-gradient(
          90deg,
          var(--line) 1px,
          transparent 1px var(--size)
        )
        50% 50% / var(--size) var(--size),
      linear-gradient(var(--line) 1px, transparent 1px var(--size)) 50% 50% /
        var(--size) var(--size);
    -webkit-mask: linear-gradient(-20deg, transparent 64%, white);
            mask: linear-gradient(-20deg, transparent 64%, white);
    top: 0;
    transform-style: flat;
    pointer-events: none;
    z-index: -1;
  }

  .bear-link {
    color: canvasText;
    position: fixed;
    top: 1rem;
    left: 1rem;
    width: 48px;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    opacity: 0.8;
  }

  :where(.x-link, .bear-link):is(:hover, :focus-visible) {
    opacity: 1;
  }

  .bear-link svg {
    width: 75%;
  }

  /* Utilities */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }
}
</style>


  
</head>

<body translate="no">
  <main>
      <!-- <img src="./dark.png" alt="" /> -->
      <button aria-pressed="false" class="toggle">
        <div class="socket">
          <div class="socket-shadow"></div>
        </div>
        <div class="face">
          <div class="face-shadow"></div>
          <div class="face-glowdrop"></div>
          <div class="face-plate"></div>
          <div class="face-shine">
            <div class="face-shine-shadow"></div>
          </div>
          <div class="face-glows"><div></div></div>
          <svg
            class="glow"
            viewBox="0 0 24 24"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              class="glow-path"
              d="M9.8815 1.36438L9.88141 1.36429C9.70639 1.18942 9.48342 1.07041 9.24073 1.02235C8.99803 0.974286 8.74653 0.999323 8.51808 1.09429L8.51753 1.09452C4.54484 2.75146 1.75 6.6732 1.75 11.25C1.75 17.3262 6.67489 22.25 12.75 22.25C14.9217 22.2501 17.0448 21.6075 18.852 20.4032C20.6591 19.1989 22.0695 17.4868 22.9055 15.4825L22.9058 15.4818C23.0007 15.2532 23.0256 15.0015 22.9774 14.7587C22.9291 14.5159 22.8099 14.2929 22.6348 14.118C22.4597 13.9431 22.2366 13.8241 21.9937 13.7761C21.7509 13.7281 21.4993 13.7533 21.2708 13.8484L21.2707 13.8485C20.2346 14.2801 19.1231 14.5016 18.0007 14.5H18C15.7457 14.5 13.5837 13.6045 11.9896 12.0104C10.3955 10.4163 9.5 8.25433 9.5 5.99999L9.5 5.99927C9.49838 4.8769 9.71983 3.76541 10.1515 2.72938C10.2468 2.50072 10.2721 2.24888 10.224 2.00584C10.1759 1.76281 10.0567 1.53954 9.8815 1.36438Z"
              stroke-width="0"
            />
          </svg>
          <svg
            class="trail-holder"
            viewBox="0 0 24 24"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              class="trail"
              d="M9.8815 1.36438L9.88141 1.36429C9.70639 1.18942 9.48342 1.07041 9.24073 1.02235C8.99803 0.974286 8.74653 0.999323 8.51808 1.09429L8.51753 1.09452C4.54484 2.75146 1.75 6.6732 1.75 11.25C1.75 17.3262 6.67489 22.25 12.75 22.25C14.9217 22.2501 17.0448 21.6075 18.852 20.4032C20.6591 19.1989 22.0695 17.4868 22.9055 15.4825L22.9058 15.4818C23.0007 15.2532 23.0256 15.0015 22.9774 14.7587C22.9291 14.5159 22.8099 14.2929 22.6348 14.118C22.4597 13.9431 22.2366 13.8241 21.9937 13.7761C21.7509 13.7281 21.4993 13.7533 21.2708 13.8484L21.2707 13.8485C20.2346 14.2801 19.1231 14.5016.........完整代码请登录后点击上方下载按钮下载查看