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

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

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