css实现一个礼物盒子礼盒包装盒拆开动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现一个礼物盒子礼盒包装盒拆开动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<style>
:root {
--height: 20;
--width: 20;
--depth: 20;
--no-of-steps: 12;
--primary-hue: 260;
--secondary-hue: 45;
--bg: hsl(var(--primary-hue), 30%, 90%);
--primary: hsl(var(--primary-hue), 80%, 50%);
--secondary: hsl(var(--secondary-hue), 100%, 50%);
--ribbon-bg: linear-gradient(90deg, var(--secondary) 0 10%, transparent 10% 25%, var(--secondary) 25% 75%, transparent 75% 90%, var(--secondary) 90%);
--ribbon-bg-rotated: linear-gradient(0deg, var(--secondary) 0 10%, transparent 10% 25%, var(--secondary) 25% 75%, transparent 75% 90%, var(--secondary) 90%);
--ribbon-width: calc(var(--width) * 0.2vmin);
}
*,
*:after,
*:before {
box-sizing: border-box;
transform-style: preserve-3d;
}
body {
background: var(--bg);
min-height: 100vh;
display: grid;
place-items: center;
perspective: 100vmin;
overflow: hidden;
}
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;
}
.close,
.open {
position: fixed;
height: 100vh;
width: 100vw;
z-index: 2;
transform: scale(var(--scale, 1)) translate3d(0, 0, 50vmin);
transition: transform 0s var(--reveal-delay, calc(((var(--no-of-steps, 15) + 1) * var(--delay, 0.2)) * 1s));
}
#package:checked ~ .close,
.open {
--scale: 0;
--reveal-delay: 0s;
}
#package:checked ~ .open {
--scale: 1;
--reveal-delay: calc(((var(--no-of-steps, 15) + 1) * var(--delay, 0.2)) * 1s);
}
#package:checked ~ .scene {
--packaged: 1;
}
.scene {
transform: rotateX(calc(var(--rotate-x, -24) * 1deg)) rotateY(calc(var(--rotate-y, -32) * 1deg)) rotateX(90deg) translate3d(0, 0, calc(var(--height, 20) * -0.5vmin));
}
.scene *,
.scene *:after,
.scene *:before {
--step-delay: calc(var(--step, 1) - ((1 - var(--packaged, 0)) * (var(--step, 1) - ((var(--no-of-steps) + 1) - var(--step, 1)))));
transition: transform calc(var(--speed, 0.2) * 1s) calc((var(--step-delay) * var(--delay, 0.2)) * 1s) ease-in-out, opacity calc(var(--speed, 0.2) * 1s) calc((var(--step-delay) * var(--delay, 0.2)) * 1s) ease-in-out;
}
.gift {
height: calc(var(--depth) * 1vmin);
width: calc(var(--width) * 1vmin);
background: var(--primary);
}
.gift__gift {
height: calc(var(--height) * 1vmin);
width: calc(min(var(--width), var(--depth)) * 1vmin);
position: absolute;
bottom: 50%;
transform-origin: 50% 100%;
transform: rotateX(-90deg) rotateY(45deg);
}
.gift__gift svg {
height: 50%;
position: absolute;
left: 50%;
top: 50%;
opacity: var(--packaged, 0);
transform: translate(-50%, -50%) translate(0, calc((1 - var(--packaged, 0)) * var(--height) * -1.25vmin));
}
.gift__ribbon {
position: absolute;
height: 50%;
width: var(--ribbon-width);
background: var(--ribbon-bg);
left: 50%;
bottom: 50%;
transform-origin: 50% 100%;
transform: translate(-50%, 0) rotate(calc(var(--rotate, 0) * 1deg)) translate(0, 100%) scaleY(var(--packaged, 0));
}
.gift__ribbon:nth-of-type(1) {
--rotate: 0;
}
.........完整代码请登录后点击上方下载按钮下载查看
网友评论0