css实现一个衣柜打开关闭动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现一个衣柜打开关闭动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> *, *:after, *:before { box-sizing: border-box; transform-style: preserve-3d; } @property --spin { initial-value: 0deg; inherits: false; syntax: '<angle>'; } :root { --bg: #bddbbd; --width: 30; --height: 54; --backboard: #d1c294; --depth: 20; --rx: -20; --ry: 38; --thickness: 1; --hue: 0; --saturation: 0%; --unit-one: hsl(var(--hue), var(--saturation), 60%); --unit-two: hsl(var(--hue), var(--saturation), 50%); --unit-three: hsl(var(--hue), var(--saturation), 40%); --unit-four: hsl(var(--hue), var(--saturation), 30%); --shelf-one: #e6e6e6; --shelf-two: #d9d9d9; --shelf-three: #ccc; --rail-one: #e6e6e6; --rail-two: #ccc; --rail-three: #fff; --handle: #e6e6e6; --open: 0; } body { font-weight: bold; font-family: sans-serif; } .cuboid { width: 100%; height: 100%; position: relative; } .cuboid__side:nth-of-type(1) { height: calc(var(--thickness) * 1vmin); width: 100%; position: absolute; top: 0; transform: translate(0, -50%) rotateX(90deg); } .cuboid__side:nth-of-type(2) { height: 100%; width: calc(var(--thickness) * 1vmin); position: absolute; top: 50%; right: 0; transform: translate(50%, -50%) rotateY(90deg); } .cuboid__side:nth-of-type(3) { width: 100%; height: calc(var(--thickness) * 1vmin); position: absolute; bottom: 0; transform: translate(0%, 50%) rotateX(90deg); } .cuboid__side:nth-of-type(4) { height: 100%; width: calc(var(--thickness) * 1vmin); position: absolute; left: 0; top: 50%; transform: translate(-50%, -50%) rotateY(90deg); } .cuboid__side:nth-of-type(5) { height: 100%; width: 100%; transform: translate3d(0, 0, calc(var(--thickness) * 0.5vmin)); position: absolute; top: 0; left: 0; } .cuboid__side:nth-of-type(6) { height: 100%; width: 100%; transform: translate3d(0, 0, calc(var(--thickness) * -0.5vmin)) rotateY(180deg); position: absolute; top: 0; left: 0; } body { background-color: var(--bg); min-height: 100vh; display: grid; place-items: center; } .wardrobe { -webkit-animation: spin 10s infinite linear; animation: spin 10s infinite linear; height: calc(var(--height) * 1vmin); width: calc(var(--width) * 1vmin); transform: translate3d(-50%, -50%, 50vmin) rotateX(calc(var(--rx) * 1deg)) rotateY(calc(var(--ry) * 1deg)); position: absolute; top: 50%; left: 50%; } .wardrobe__panel { position: absolute; } .wardrobe__panel--top, .wardrobe__panel--bottom { height: calc(var(--depth) * 1vmin); width: calc((var(--width) + 1) * 1vmin); left: 50%; transform: translate(-50%, calc(50% * var(--coefficient))) rotateX(90deg); } .wardrobe__panel--top { --coefficient: -1; top: 0; } .wardrobe__panel--bottom { --coefficient: 1; bottom: 4%; } .wardrobe__panel--left, .wardrobe__panel--right { height: calc(100% - 4% - 1vmin); width: calc(var(--depth) * 1vmin); top: 0.5vmin; transform: translate(calc(50% * var(--coefficient)), 0) rotateY(calc(90deg * var(--coefficient))); } .wardrobe__panel--left { --coefficient: -1; left: 0; } .wardrobe__panel--right { --coefficient: 1; right: 0; } .wardrobe__panel--back, .wardrobe__panel--front { height: 96%; width: calc(var(--width) * 1vmin); transform: translate3d(0, 0, calc((var(--coefficient) * var(--depth)) * 1vmin)); } .wardrobe__panel--back { --coefficient: -0.5; background: var(--backboard); transform: translate3d(0, 0, calc(((var(--coefficient) * var(--depth)) * 1vmin) - 1px)); } .wardrobe__panel--front { --coefficient: 0.5; display: flex; } .wardrobe__leg { --size: calc(var(--depth) * 0.2vmin); height: var(--size); width: var(--size); position: absolute; transform: translate3d(0, 0, calc((var(--height) * 0.02) * -1vmin)); --thickness: calc(var(--height) * 0.04); } .wardrobe__leg--ne { top: 1px; left: 1px; } .wardrobe__leg--nw { top: 1px; right: 1px; } .wardrobe__leg--se { bottom: 1px; left: 1px; } .wardrobe__leg--sw { bottom: 1px; right: 1px; } .wardrobe__rail { height: calc(var(--thickness) * 1vmin); width: 100%; top: 15%; position: absolute; } .wardrobe__shelf { height: calc(var(--depth) * 0.75vmin); width: 100%; top: 65%; position: absolute; transform: rotateX(90deg) translate(0, calc(var(--depth) * -0.12vmin)); } .wardrobe__door { position: absolute; width: calc(50% + 0.5vmin); height: calc(100% + 0.5vmin); top: -0.25vmin; } .wardrobe__door--left { left: -0.5vmin; --origin: 0 50%; --coefficient: -1; } .wardrobe__door--right { right: -0.5vmin; --origin: 100% 50%; --coefficient: 1; } details { position: relative; height: 100%; width: 100%; z-index: 2; transform: translate3d(0, 0, 0.5vmin); } details:hover:not([open]) ~.door { --open: 0.05; } summary { height: 100%; position: absolute; top: 0; left: 0; z-index: 2; width: 100%; cursor: pointer; opacity: 1; outline: transparent; } summary::-webkit-details-marker { display: none; } summary:after { content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 100%; transform-origin: var(--origin); transition: transform 0.2s; transform: rotateY(calc((var(--open) * (115 * var(--coefficient))) * 1deg)) translate3d(0, 0, 0.5vmin); } [open], [open] ~ .door { --open: 1; } .door { height: 100%; width: 100%; position: absolute; pointer-events: none; top: 0; left: 0; transition: transform 0.2s; transform: rotateY(calc((var(--open) * (120 * var(--coefficient))) * 1deg)); transform-origin: var(--origin); } .door-cuboid { transform: translate3d(0, 0, 0.5vmin); } .rail div { background: var(--rail-one); } .rail div:nth-of-type(1) { background: var(--rail-two); } .rail div:nth-of-type(4) { background: var(--rail-three); } .rail div:nth-of-type(5) { background: var(--rail-one); } .shelf div { background: var(--shelf-one); } .shelf div:nth-of-type(3) { background: var(--shelf-two); } .shelf div:nth-of-type(4) { background: var(--shelf-three); } .shelf div:nth-of-type(5) { background: var(--shelf-one); } .leg > div, .door-cuboid > div, .panel-cuboid > div { background: var(--unit-one); } .leg > div:nth-of-type(3), .door-cuboid > div:nth-of-type(3), .panel-cuboid > div:nth-of-type(3) { background: var(--unit-one); } .leg > div:nth-of-type(4), .door-cuboid > div:nth-of-type(4), .panel-cuboid > div:nth-of-type(4) { background: var(--unit-three); } .leg > div:nth-of-type(5), .door-cuboid > div:nth-of-type(5), .panel-cuboid > div:nth-of-type(5) { background: var(--unit-two); } .door-cuboid > div:nth-of-type(1) { background: var(--unit-four); } .panel-cuboid--bottom div:nth-of-type(5) { background: var(--unit-three); } .panel-cuboid--left div:nth-of-type(5) { background: var(--unit-three); } .panel-cuboid--right div:nth-of-type(6) { background: var(--unit-four); } .door-cuboid div:nth-of-type(5):after { content: ''; height: 24%; width: 8%; background: var(--handle); position: absolute; top: 50%; right: 5%; transform: translate(0, -50%); } .door-cuboid--left div:nth-of-type(5):after { right: 5%; } .door-cuboid--right div:nth-of-type(5):after { left: 5%; } .door-cuboid--right div:nth-of-type(6) { background: var(--unit-one); } img { position: absolute; height: 8%; transform: rotate(34deg); bottom: 5%; left: 10%; filter: saturate(0.5); } .css { display: grid; place-items: center; font-size: 6vmin; color: #1a1a1a; } .css span { display: block; text-align: right; width: 100%; padding-right: 10%; } .is { display: grid; place-items: center; font-size: 6vmin; color: #fafafa; padding-top: 70%; } .awesome { font-size: 5vmin; position: absolute; display: flex; flex-direction: column; align-items: center; top: 50%; left: 50%; transform: translate(-50%, -55%); } .awesome span { -webkit-animation: sway 1s calc(var(--index) * -0.1s.........完整代码请登录后点击上方下载按钮下载查看
网友评论0