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; } .gift__ribbon:nth-of-type(2) { --rotate: 90; } .gift__ribbon:nth-of-type(3) { --rotate: 180; } .gift__ribbon:nth-of-type(4) { --rotate: 270; } .gift__label { position: absolute; height: calc(var(--height) * 0.3vmin); width: calc(var(--height) * 0.15vmin); background: #fafafa; top: 15%; left: 10%; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); -webkit-clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); transform-origin: 50% 0; transform: scale(var(--packaged, 0)); } .gift__label:after, .gift__label:before { content: ''; background: #404040; position: absolute; height: calc(var(--h, 40) * 1%); width: 20%; top: 50%; left: 50%; transform-origin: 50% 100%; transform: translate(-50%, -50%) translate(calc(var(--t, -1) * 60%), 0) scaleY(var(--packaged, 0)); } .gift__label:before { --h: 60; --t: 1; } .gift__lid { height: 100%; width: 100%; transform: scale(1.05) translate3d(0, 0, calc(((var(--height, 0) * (2 - var(--packaged, 0))) * 1vmin) + 4px)); } .gift__side { background: var(--primary); filter: brightness(var(--b, 1)); position: absolute; bottom: 50%; left: 50%; height: calc(var(--height) * 1vmin); width: calc(var(--width) * 1vmin); transform-origin: 50% 100%; transform: translate(-50%, 0) rotate(calc(var(--rotate, 0) * 1deg)) translate(0, calc(var(--offset) * -0.5vmin)) rotateX(calc(var(--packaged, 0) * -90deg)); } .gift__side:after { content: ''; position: absolute; height: 100%; tra.........完整代码请登录后点击上方下载按钮下载查看
网友评论0