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 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__flap--bottom {
--step: 16;
}
.package__tape--bottom {
--step: 15;
}
.package__wrapper {
--step: 14;
}
.package,
.package__shadow {
--step: 13;
}
.package__icon--html {
--step: 8;
}
.package__icon--css {
--step: 7;
}
.package__icon--js {
--step: 6;
}
.package__side--extra > .package__flap--top {
--step: 5;
}
.package__side--tabbed > .package__flap--top {
--step: 4;
}
.package__side--main > .package__flap--top {
--step: 3;
}
.package__side--flipped > .package__flap--top {
--step: 2;
}
.package__tape--top {
--step: 1;
}
.package__branding,
.package__label,
.package__label--shadow,
.package__branding--shadow {
--step: 0;
}
.package__label:after {
--step: 5;
}
.package__label:before {
--step: 5;
}
.package {
height: calc(var(--depth) * 1vmin);
width: calc(var(--width) * 1vmin);
transform-origin: 50% 0;
transform: rotateX(calc((1 - var(--packaged, 0)) * 90deg));
}
.package__shadow {
background: #595959;
opacity: 0.75;
position: absolute;
height: 99%;
width: 99%;
top: 0;
left: 50%;
transform-origin: 50% 0;
transform: translate(-50%, 0) scaleY(var(--packaged));
}
.package__tape {
background: var(--tape);
height: 4vmin;
width: 94%;
left: 50%;
position: absolute;
transform-origin: 0 50%;
transform: translate3d(-50%, var(--offset-y), 2px) scaleX(var(--packaged, 0));
}
.package__tape--bottom {
--offset-y: 50%;
bottom: 100%;
}
.package__tape--top {
--offset-y: -50%;
top: 100%;
}
.package__direction {
display: inline-flex;
align-items: center;
font-family: sans-serif;
font-weight: bold;
font-size: 1.75vmin;
transform: rotate(180deg) translate3d(0, 0, 1px);
position: absolute;
top: 0;
right: 0;
padding: 5%;
justify-content: flex-end;
color: #1a1a1a;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.package__direction svg {
fill: currentColor;
width: 8%;
min-width: 2vmin;
}
.package__wrapper {
transform: translate3d(0, calc(((1 - var(--packaged, 0)) * var(--height)) * 1vmin), calc(var(--height) * -0.5vmin));
}
.package__label {
height: 20%;
width: 30%;
background: #fafafa;
position: absolute;
right: 10%;
bottom: 20%;
border-radius: 5%;
opacity: var(--packaged);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: rotate(180deg) translate3d(0, 0, calc((1 - (var(--packaged, 0))) * 5vmin));
}
.package__label--shadow {
transform: rotate(180deg) translate3d(0, 0, 0) scale(var(--packaged));
background: #1a1a1a;
}
.package__label:after,
.package__label:before {
content: '';
position: absolute;
height: 20%;
width: var(--line-length, 70%);
top: var(--line, 20%);
left: 10%;
background: #1a1a1a;
transform-origin: 0 50%;
transform: scaleX(var(--packaged, 0));
}
.package__label:before {
--line: 50%;
--line-length: 40%;
}
.package__branding {
height: 30%;
position: absolute;
bottom: 10%;
left: 10%.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0