css实现4种规格大小三维纸箱折叠包装动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：css实现4种规格大小三维纸箱折叠包装动画效果代码，有s、m、l、xl码。

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>
        *,
        *:after,
        *:before {
          box-sizing: border-box;
          transform-style: preserve-3d;
        }
        body {
          background: #e7efef;
          min-height: 100vh;
          display: grid;
          place-items: center;
          perspective: 100vmin;
          overflow: hidden;
        }
        :root {
          --packaged: 0;
          --steps: 23;
          --delay: 0.2;
          --speed: 0.2;
          --face-1: #be8e64;
          --face-2: #dba776;
          --face-3: #e7b37e;
          --face-4: #f3bf86;
          --face-5: #eab37b;
          --face-6: #7d3712;
          --tape: #b07c54;
        }
        .close,
        .open {
          position: fixed;
          height: 100vh;
          width: 100vw;
          z-index: 2;
          transform: scale(1) translate3d(0, 0, 50vmin);
          transition: transform 0s calc(((var(--steps) + 2) * var(--delay)) * 1s);
        }
        .open {
          transform: scale(0) translate3d(0, 0, 50vmin);
          transition: transform 0s 0s;
        }
        #package:checked ~ .close {
          transition: transform 0s 0s;
          transform: scale(0) translate3d(0, 0, 50vmin);
        }
        #package:checked ~ .open {
          transition: transform 0s calc(((var(--steps) + 2) * var(--delay)) * 1s);
          transform: scale(1) translate3d(0, 0, 50vmin);
        }
        input {
          position: fixed;
          top: 0;
          left: 0;
          width: 1px;
          height: 1px;
          padding: 0;
          margin: -1px;
          overflow: hidden;
          clip: rect(0, 0, 0, 0);
          white-space: nowrap;
          border-width: 0;
        }
        [for='one'],
        [for='two'],
        [for='three'],
        [for='four'] {
          position: fixed;
          top: var(--top);
          right: 1rem;
          z-index: 3;
        }
        [for='one'] {
          --top: 1rem;
        }
        [for='two'] {
          --top: calc(1rem + 49px);
        }
        [for='three'] {
          --top: calc(1rem + 98px);
        }
        [for='four'] {
          --top: calc(1rem + 147px);
        }
        #one:checked ~ .one,
        #two:checked ~ .two,
        #three:checked ~ .three,
        #four:checked ~ .four {
          border-color: #e63b19;
        }
        .size-label {
          font-family: sans-serif;
          font-weight: bold;
          color: #262626;
          height: 44px;
          width: 44px;
          display: grid;
          place-items: center;
          background: #fcfcfc;
          border-radius: 50%;
          cursor: pointer;
          border: 4px solid #8bb1b1;
          transform: translate(0, calc(var(--y, 0) * 1%)) scale(var(--scale, 1));
          transition: transform 0.1s;
        }
        .size-label:hover {
          --y: -5;
        }
        .size-label:active {
          --y: 2;
          --scale: 0.9;
        }
        #one:checked ~ .scene .package__wrapper {
          --height: 10;
          --width: 20;
          --depth: 20;
        }
        #two:checked ~ .scene .package__wrapper {
          --height: 20;
          --width: 20;
          --depth: 20;
        }
        #three:checked ~ .scene .package__wrapper {
          --height: 20;
          --width: 30;
          --depth: 20;
        }
        #four:checked ~ .scene .package__wrapper {
          --height: 30;
          --width: 20;
          --depth: 30;
        }
        #package:checked ~ .scene .package__side--main > .package__flap--top:before {
          --bg-step: 9;
        }
        #package:checked ~ .scene {
          --packaged: 1;
        /**
            * Handles all the steps of packaging up the box. Quite long winded.
            * 1. Start with package rotated so that all sides are flat
            * 2. Extra Side
            * 3. Then Tabbed Side
            * 4. Then Flipped Side and Tab
            * 5. Then go through the bottom flaps in order
            * 6. Tilt the box up.
            * 7. Close the top.
          */
        }
        #package:checked ~ .scene .package__side--extra {
          --step: 0;
        }
        #package:checked ~ .scene .package__side--tabbed {
          --step: 1;
        }
        #package:checked ~ .scene .package__side--tabbed:after {
          --step: 2;
        }
        #package:checked ~ .scene .package__side--flipped {
          --step: 2;
        }
        #package:checked ~ .scene .package__side--extra > .package__flap--bottom {
          --step: 3;
        }
        #package:checked ~ .scene .package__side--tabbed > .package__flap--bottom {
          --step: 4;
        }
        #package:checked ~ .scene .package__side--main > .package__flap--bottom {
          --step: 5;
        }
        #package:checked ~ .scene .package__side--flipped > .package__flap--bottom {
          --step: 6;
        }
        #package:checked ~ .scene .package__tape--bottom {
          --step: 7;
        }
        #package:checked ~ .scene .package__wrapper {
          --step: 8;
        }
        #package:checked ~ .scene .package,
        #package:checked ~ .scene .package__shadow {
          --step: 9;
        }
        #package:checked ~ .scene .package__icon--html {
          --step: 10;
        }
        #package:checked ~ .scene .package__icon--css {
          --step: 11;
        }
        #package:checked ~ .scene .package__icon--js {
          --step: 12;
        }
        #package:checked ~ .scene .package__side--extra > .package__flap--top {
          --step: 16;
        }
        #package:checked ~ .scene .package__side--tabbed > .package__flap--top {
          --step: 17;
        }
        #package:checked ~ .scene .package__side--main > .package__flap--top {
          --step: 18;
        }
        #package:checked ~ .scene .package__side--flipped > .package__flap--top {
          --step: 19;
        }
        #package:checked ~ .scene .package__tape--top {
          --step: 20;
        }
        #package:checked ~ .scene .package__branding,
        #package:checked ~ .scene .package__label,
        #package:checked ~ .scene .package__branding--shadow,
        #package:checked ~ .scene .package__label--shadow {
          --step: 21;
        }
        #package:checked ~ .scene .package__label:after {
          --step: 22;
        }
        #package:checked ~ .scene .package__label:before {
          --step: 23;
        }
        .scene {
          transform: rotateX(-24deg) rotateY(-32deg) rotateX(90deg);
        }
        .package,
        .package__wrapper,
        .package__flap,
        .package__flap--top,
        .package__flap--bottom,
        .package__side,
        .package__side:after,
        .package__icon,
        .package__tape--top,
        .package__tape--bottom,
        .package__branding,
        .package__label,
        .package__label:after,
        .package__label:before,
        .package__shadow,
        .package__label--shadow,
        .package__branding--shadow {
          --delay: 0.2;
          --speed: 0.2;
          transition: transform calc(var(--speed, 0.2) * 1s) calc((var(--step, 1) * var(--delay, 1)) * 1s), opacity 0.1s calc(((var(--step, 1) * var(--delay, 1)) + ((var(--speed) - 0.1) * (1 - var(--packaged)))) * 1s), height calc(var(--speed, 0.2) * 1s), width calc(var(--speed, 0.2) * 1s);
          transition-timing-function: ease-in-out;
        }
        .package__side--extra {
          --step: 23;
        }
        .package__side--tabbed {
          --step: 22;
        }
        .package__side--tabbed:after {
          --step: 21;
        }
        .package__side--flipped {
          --step: 20;
        }
        .package__side--extra > .package__flap--bottom {
          --step: 19;
        }
        .package__side--tabbed > .package__flap--bottom {
          --step: 18;
        }
        .package__side--main > .package__flap--bottom {
          --step: 17;
        }
        .package__side--flipped > .package__f.........完整代码请登录后点击上方下载按钮下载查看