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