js+css+svg实现立体分层3d ui设计稿手绘稿效果代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：js+css+svg实现立体分层3d ui设计稿手绘稿效果代码

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

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

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

@layer normalize, base, demo, structural, explode, shadows;

@layer shadows {
  :root {
    --power: linear(
      0 0%, 0.2688 9.91%, 0.3859 15%,
      0.4917 20.19%, 0.5865 25.5%,
      0.6705 30.93%, 0.7441 36.51%,
      0.8075 42.26%, 0.8593 47.98%,
      0.9022 53.93%, 0.9366 60.13%,
      0.963 66.67%, 0.9812 73.4%,
      0.9929 80.76%, 0.9986 88.89%, 1 100%
    );
  }
  .shadow {
    transition: opacity 0.26s, transform 0.26s, scale 0.26s;
  }

  .shadow--main:has(+ .layer > .mover:hover),
  .mover:has(+ .layer > .mover:hover) > .shadow,
  .mover:has(+ .layer > .mover:hover) > .shadow-wrap .shadow {
    opacity: 0.2;

    div {
      scale: 0.94;
    }
  }
  .mover:hover > .shadow-wrap .shadow,
  .mover:hover > .shadow {
    opacity: 1;
    scale: 0.98;
  }
}

@layer explode {
  main {
    transform-style: preserve-3d;
    * {
      transform-style: preserve-3d;
    }
  }
  .shadow {
    scale: 0.999;
    overflow: hidden;
  }

  [data-exploded='false'] {
    .shadow {
      opacity: 1;
      transition: opacity 1s;

      div {
        transition: translate 1s, scale 0.26s;
      }
    }
    main {
      transform: translate3d(0, 0, 100vmin) rotateX(0deg) rotateY(0deg)
        rotateX(0deg);
      transition: transform 1s 1s var(--power);

      /* .shadow--main div, */
      .mover > :is(.content, .shadow) {
        transition: transform 0.26s, opacity 1s;
      }

      .layer {
        translate: 0 0 0;
        transition: translate 1s var(--power);
      }
    }
  }

  [data-exploded='true'] {
    .mover > .shadow {
      opacity: 0.5;
      scale: 0.96;
      transition: opacity 1s 1s;
    }
    .mover > .shadow-wrap {
      opacity: 1;
      .shadow {
        opacity: 0.5;
      }
    }
    main {
      transform: translate3d(0, 0, 100vmin) rotateX(calc(var(--x1, 340) * 1deg))
        rotateY(calc(var(--y1, 30) * 1deg)) rotateX(calc(var(--x2, 40) * 1deg));
      transition: transform 1s var(--power);

      .mover > :is(.content, .shadow) {
        transition: transform 0.26s;
      }

      .shadow--main div,
      .shadow-wrap .shadow div,
      .mover > .shadow div {
        transition: translate 1s 1s, scale 0.26s;
      }

      .shadow--main div,
      .mover > .shadow div {
        translate: calc(var(--tx, 0.5) * 1rem) calc(var(--ty, -0.5) * 1rem);
      }

      .mover:hover > div {
        transform: translate3d(0, 0, 1rem);
      }

      .layer {
        translate: 
          calc(var(--tx, 0.5) * 1rem)
          calc(var(--ty, -0.5) * 1rem)
          calc(var(--step, 4) * 1rem)
        ;
        transition: translate 1s 1s;
        transition-timing-function: var(--power);
      }
    }
  }
}

@layer structural {
  :root {
    --accent: light-dark(hsl(12 94% 60%), hsl(280 80% 80%));
    --dialog-width: 140px;
    --dialog-height: 112px;
    --shadow: light-dark(hsl(0 0% 0% / 0.3), hsl(0 0% 0% / 0.7));
    --heading-size: 44px;
    --count: 4;
    --content-size: calc(
      (var(--count) - 1) * 0.5rem + (var(--count) * 1.25rem) + 1.5rem + 2px
    );
  }

  .layer {
    pointer-events: none;
    position: relative;
  }
  main,
  section.layer {
    grid-area: 1 / 1;
    display: grid;
    grid-template: auto / auto;
  }
  
  section.layer {
    width: clamp(300px, 50vw, 460px);
  }

  .shadow {
    grid-area: 2 / 1;
    z-index: 2;
    opacity: 0.2;
    pointer-events: none;
  }

  :root:has(dialog[open]) .shadow-wrap {
    display: block;
    opacity: 1;

    .shadow div {
      scale: 0.999;
      translate: 0 0;
    }
  }

  :root:has(dialog[open])[data-exploded='true'] .shadow-wrap {
    .shadow div {
      transition: translate 10s;
      translate: calc(var(--tx, 0.5) * 1rem) calc(var(--ty, -0.5) * 1rem);
    }
  }

  .shadow-wrap .shadow div {
    transition-property: transition, scale, transform, translate;
    transition-duration: 0.26s;
    transform-origin: 50% 0;
    scale: 0.9;
    translate: 0 -12px;
  }

  .shadow-wrap {
    display: none;
    transition-property: display, opacity, transition, scale, transform;
    transition-behavior: allow-discrete;
    transition-duration: 0.26s;
    opacity: 0;
    /* transform-origin: 50% 0;
    scale: 0.9;
    translate: 0 -12px; */
  }

  @starting-style {
    :root:has(dialog[open]) .shadow-wrap {
      opacity: 0;
    }

    :root:has(dialog[open]) .shadow-wrap .shadow div {
      scale: 0.9;
      translate: 0 -12px;
    }
  }

  .shadow--dialog {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    div {
      position: absolute;
      right: -1rem;
      right: 0;
      top: -2px;
      width: var(--dialog-width);
      height: var(--dialog-height);
      background: var(--shadow);
      border-radius: 6px;
    }
  }

  .shadow--main {
    position: relative;
    z-index: -1;
    div {
      background: var(--shadow);
      border-radius: 12px;
      position: absolute;
      inset: 0;
      translate: 0 0;
    }
  }

  .shadow--main {
    grid-area: 1 / 1;
  }
  .content--main {
    width: 100%;
  }
  .table--layer,
  .shadow--table,
  .content--main {
    grid-area: 1 / 1;
    display: grid;
    grid-template-rows: var(--heading-size) calc(
        var(--heading-size) + var(--content-size)
      );
    padding: 1rem;
    padding-top: 0;
  }

  .shadow--status div,
  .shadow--table div {
    grid-area: 2 / 1;
    background: var(--shadow);
    border-radius: 6px;
  }

  .shadow--table,
  .table--layer {
    border: 1px solid #0000;
  }

  .layer--status,
  .shadow--status,
  .content--table {
    display: grid;
    grid-template-rows: var(--heading-size) 1fr;
    grid-area: 2 / 1;
  }

  .layer--dialog,
  .content--status {
    grid-area: 2 / 1;
  }

  .mover {
    pointer-events: all;
    grid-area: 1 / 1;
    display: grid;
    grid-template: auto / auto;

    > div {
      grid-area: 1 / 1;
    }
  }
  .mover--nested {
    grid-area: 2 / .........完整代码请登录后点击上方下载按钮下载查看