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 {
   .........完整代码请登录后点击上方下载按钮下载查看