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 / 1;
  }
}

@layer demo {
  .table-slot {
    background: color-mix(in hsl, canvas, canvasText 2%);
    border: 1px solid color-mix(in hsl, canvas, canvasText 30%);
    border-radius: 6px;
  }

  .content--main {
    background: color-mix(in hsl, canvas, canvasText 4%);
    border: 1px solid color-mix(in hsl, canvas, canvasText 30%);
    border-radius: 12px;
    font-size: 0.875rem;
    position: relative;
    font-family: monospace;
  }

  .content--table {
    overflow: hidden;
  }

  .table {
    width: 100%;
    height: 100%;
    overflow: hidden;

    table {
      translate: 0 2px;
      border-collapse: collapse;
      width: 100%;
      max-width: 100%;
      font-family: monospace;

      thead {
        background: color-mix(in hsl, canvas, canvasText 4%);
        font-weight: 600;
      }

      td:first-of-type > span {
        align-items: center;
        display: flex;
        gap: 0.5rem;

        svg {
          width: 16px;
          color: var(--accent);
        }
      }

      td {
        border: 1px solid color-mix(in hsl, canvas, canvasText 30%);
        padding: 0.2rem 0.5rem;
        position: relative;

        &:nth-of-type(3) {
          overflow: hidden;
          white-space: nowrap;
          max-width: 12ch;
          text-overflow: ellipsis;
        }

        &:first-of-type {
          border-left: 0;
        }
        &:last-of-type {
          border-right: 0;
        }
      }

      .true {
        color: hsl(140 80% 40%);
      }
    }
  }

  .content--table .heading {
    padding-inline: 0.75rem;
  }

  .heading {
    align-items: center;
    display: flex;
    gap: 0.5rem;
    font-family: monospace;
    margin: 0;
    font-weight: 600;
    position: relative;
    height: 100%;

    svg {
      width: 16px;
    }

    & > button {
      aspect-ratio: 1;
      background: #0000;
      border: 0;
      cursor: pointer;
      display: grid;
      place-items: center;
      position: absolute;
      right: 0.75rem;
      top: 50%;
      translate: 0 -50%;

      &:is(:focus-visible, :hover) {
        --opacity: 1;
      }

      &::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 6px;
        background: hsl(0 0% 50% / 0.22);
        opacity: var(--opacity, 0);
        transition: opacity 0.24s;
      }
    }
  }
  .content__heading {
    padding: 0;
  }

  .table-slot,
  main {
    position: relative;
  }

  main {
    border-radius: 12px;
    text-transform: lowercase;
  }

  .table-slot::before,
  main::before {
    content: '';
    position: absolute;
    inset: 0px;
    border-radius: inherit;
    border: 2px solid var(--accent);
    background: repeating-linear-gradient(
      -45deg,
      #0000 0 4px,
      var(--accent) 4px 5px
    );
    z-index: -1;
  }

  .status {
    background: canvas;
    border-radius: 6px;
    height: 100%;
    border: 1px solid color-mix(in hsl, canvas, canvasText 30%);
  }

  .content--table {
    background: color-mix(in hsl, canvas, canvasText 2%);
    border: 1px solid color-mix(in hsl, canvas, canvasText 30%);
    border-radius: 6px;
  }

  dialog {
    transition-behavior: allow-discrete;
    transition-property: display, opacity, translate, scale, filter;
    transition-duration: 0.26s;
    opacity: 0;
    translate: 0 -12px;
    transform-origin: 50% 0;
    scale: 0.9;
    filter: blur(4px);

    &[open] {
      opacity: 1;
      scale: 1;
      translate: 0 0;
      filter: blur(0px);
    }
  }

  @starting-style {
    dialog[open] {
      filter: blur(4px);
      opacity: 0;
      scale: 0.9;
      translate: 0 -12px;
    }
  }

  dialog {
    /* display: block; */
    margin: 0;
    position: absolute;
    left: unset;
    top: -2px;
    right: -1rem;
    right: 0;
    z-index: 99999;
    border-radius: 6px;
    background: canvasText;
    color: canvas;
    padding: 0.1rem;
    width: var(--dialog-width);
    height: var(--dialog-height);
    border: 0;

    hr {
      margin: 0;
      width: 100%;
      border-style: solid;
      border-color: color-mix(in hsl, canvas, canvasText 50%);
      margin-block: 0.1rem;
      width: calc(100% + 0.2rem);
      translate: -0.1rem 0;
      border-width: 1px;
      border-bottom: 0;
    }

    svg {
      width: 16px;
    }

    button {
      width: 100%;
      display: flex;
      gap: 0.5rem;
      align-items: center;
      padding: 0.5rem;
      border: 0;
      border-radius: calc(6px - 0.1rem);
      cursor: pointer;
      background: #0000;
      font-weight: 300;
      color: color-mix(in hsl, currentColor, #0000 20%);
      position: relative;

      &:is(:focus-visible, :hover) {
        background: hsl(0 0% 50% / 0.4);
      }
    }
  }

  .badge {
    align-items: center;
    background: color-mix(in hsl, var(--accent), #0000 90%);
    border: 1px solid var(--accent);
    border-radius: 6px;
    color: var(--accent);
    display: flex;
    font-size: 12px;
    font-weight: 300;
    gap: 0.35rem;
    line-height: 1;
    padding: 0.05rem 0.15rem;
  }

  dl {
    background: canvas;
    border-radius: 6px;
    height: var(--content-size);
    color: color-mix(in hsl, canvasText, canvas);
    display: grid;
    font-size: 0.875rem;
    grid-template-columns: 1fr auto;
    grid-auto-rows: 1.25rem;
    margin: 0;
    padding: 0.75rem;
    gap: 0.5rem 0;
    z-index: 2;
    overflow: hidden;

    svg {
      width: 16px;
    }

    dt {
      align-items: center;
      display: flex;
      gap: 0.5rem;
    }
    dd {
      font-weight: 400;
      color: canvasText;
      margin: 0;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }

    .prepaid {
      color: hsl(140 80% 40%);
      position: relative;

      &::after {
        content: '';
        width: 6px;
        aspect-ratio: 1;
        border-radius: 50%;
        background: currentColor;
        position: absolute;
        left: 0;
        top: 50%;
        translate: -1ch -50%;
      }
    }
  }
}

@layer base .........完整代码请登录后点击上方下载按钮下载查看