css实现三维盒子2020到2021烟花绽放动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现三维盒子2020到2021烟花绽放动画效果代码
代码标签: 盒子 2020 到 2021 烟花 绽放 动画 效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { box-sizing: border-box; transform-style: preserve-3d; } :root { --perspective: 1200; --rotate-x: -40; --rotate-y: -45; --transform-style: preserve-3d; --cuboid-width: 30; --cuboid-height: calc((270 / 480) * var(--cuboid-width)); --cuboid-depth: calc((270 / 480) * var(--cuboid-width)); --plane-width: var(--cuboid-width); --plane-height: calc((270 / 480) * var(--cuboid-width)); --exploded: 0; --transition: 0.2s; --speed: 0.5s; --stagger: -0.1s; --bg: hsl(205, 32%, calc((10 + (var(--toggled, 0) * 20)) * 1%)); } body { min-height: 100vh; overflow: hidden; background: var(--bg); margin: 0; } [type="checkbox"] { height: 0; width: 0; position: absolute; left: 100%; } label { height: 100vh; width: 100vw; position: absolute; z-index: 10; } :checked ~ .scene, :checked ~ .backdrop { --toggled: 1; } .shadow { --bg: hsl(45, 80%, calc((0 + (var(--toggled, 0) * 90)) * 1%)); height: 100%; width: 100%; position: absolute; background: radial-gradient(ellipse, var(--bg), transparent); transform: translate3d(0, calc((50 - (var(--toggled, 0) * 100)) * 1%), 1px) scale(1.15, 1.3); will-change: transform; transition: transform 0.2s, background 0.2s; filter: blur(10px); } .seat { height: 100%; width: 100%; transform-origin: 50% 0; transform: translate(0, 50%) rotateX(calc(var(--toggled, 0) * 90deg)); transition: transform 0.2s; } .scene { perspective: calc(var(--perspective, 800) * 1px); transform-style: var(--transform-style); height: 100vh; width: 100vw; display: flex; align-items: center; justify-content: center; transform: translate3d(0, 0, calc((1 * var(--cuboid-depth)) * 2vmin)); } .backdrop { --bg: hsl(205, 32%, calc((5 + (var(--toggled, 0) * 5)) * 1%)); height: 100vh; width: 100vw; background: var(--bg); position: fixed; top: 0; left: 0; transition: background var(--transition); } .plane { height: calc(var(--plane-height, 25) * 1vmin); width: calc(var(--plane-width, 25) * 1vmin); transform-style: var(--transform-style); transform: rotateX(calc(var(--rotate-x, -24) * 1deg)) rotateY(calc(var(--rotate-y, -24) * 1deg)) rotateX(90deg) translate3d(0, 0, 0); } .cuboid { --width: var(--cuboid-width, 15); --height: var(--cuboid-height, 10); --depth: var(--cuboid-depth, 4); height: calc(var(--depth) * 1vmin); width: calc(var(--width) * 1vmin); position: absolute; transform: translate3d(calc(var(--x, 0) * 1vmin), calc(var(--y, 0) * 1vmin), calc(var(--z, 0) * 1vmin)) rotateX(calc(var(--rotate-cuboid-x, 0) * 1deg)) rotateY(calc(var(--rotate-cuboid-y, 0) * 1deg)) rotateZ(calc(var(--rotate-cuboid-z, 0) * 1deg)); transform-style: var(--transform-style); } .cuboid__side { transform-style: var(--transform-style); transition: transform 0.25s ease; } .cuboid > div:nth-of-type(1) { height: calc(var(--height) * 1vmin); width: 100%; transform-origin: 50% 50%; transform: rotateX(-90deg); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotateX(-90deg) translate3d(0, 0, calc((var(--depth) / (2 - var(--exploded))) * 1vmin)); } .cuboid > div:nth-of-type(2) { height: calc(var(--height) * 1vmin); width: 100%; transform-origin: 50% 50%; transform: translate(-50%, -50%) rotateX(-90deg) rotateY(180deg) translate3d(0, 0, calc((var(--depth) / (2 - var(--exploded))) * 1vmin)); position: absolute; top: 50%; left: 50%; } .cuboid > div:nth-of-type(3) { height: calc(var(--height) * 1vmin); width: calc(var(--depth) * 1vmin); transform: translate(-50%, -50%) rotateX(-90deg) rotateY(90deg) translate3d(0, 0, calc((var(--width) / (2 - var(--exploded))) * 1vmin)); position: absolute; top: 50%; left: 50%; } .cuboid > div:nth-of-type(4) { height: calc(var(--height) * 1vmin); width: calc(var(--depth) * 1vmin); transform: translate(-50%, -50%) rotateX(-90deg) rotateY(-90deg) translate3d(0, 0, calc((var(--width) / (2 - var(--exploded))) * 1vmin)); position: absolute; top: 50%; left: 50%; } .cuboid > div:nth-of-type(5) { height: calc(var(--depth) * 1vmin); width: calc(var(--width) * 1vmin); transform: translate(-50%, -50%) translate3d(0, 0, calc((var(--height) / (2 - var(--exploded))) * 1vmin)); position: absolute; top: 50%; left: 50%; } .cuboid > div:nth-of-type(6) { height: calc(var(--depth) * 1vmin); width: calc(var(--width) * 1vmin); transform: translate(-50%, -50%) translate3d(0, 0, calc((var(--height) / (2 - var(--exploded))) * -1vmin)) rotateX(180deg); position: absolute; top: 50%; left: 50%; } .cuboid { --z: calc(var(--cuboid-height) / 2); } .cuboid div { background: #080808; } .cuboid div:nth-of-type(1), .cuboid d.........完整代码请登录后点击上方下载按钮下载查看
网友评论0