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

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

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