css实现正方体方块跳动动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现正方体方块跳动动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @property --hue { syntax: '<integer>'; inherits: true; initial-value: 0; } * { box-sizing: border-box; } :root { --perspective: 1000; --cuboid-height: 14; --cuboid-width: 14; --cuboid-depth: 14; --speed: 1.2s; --x: 0; --y: 0; --z: 7; --rotate-x: -30; --rotate-y: -24; --plane-width: 14; --plane-height: 14; --rotate-cuboid-x: 0; --rotate-cuboid-y: 0; --rotate-cuboid-z: 0; } body { min-height: 100vh; background: #1a1a1a; overflow: hidden; } .scene { -webkit-perspective: calc(var(--perspective, 800) * 1px); perspective: calc(var(--perspective, 800) * 1px); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; height: 100vh; width: 100vw; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; } .plane { height: calc(var(--plane-height, 25) * 1vmin); width: calc(var(--plane-width, 25) * 1vmin); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: rotateX(calc(var(--rotate-x, -24) * 1deg)) rotateY(calc(var(--rotate-y, -24) * 1deg)) rotateX(90deg); transform: rotateX(calc(var(--rotate-x, -24) * 1deg)) rotateY(calc(var(--rotate-y, -24) * 1deg)) rotateX(90deg); } .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); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; position: absolute; -webkit-transform: translate3d(calc(var(--x, 4) * 1vmin), calc(var(--y, 5) * 1vmin), calc(var(--z, 0) * 1vmin)) rotateX(-90deg) rotateY(calc(var(--rotate-cuboid-y, 0) * 1deg)) rotateZ(calc(var(--rotate-cuboid-z, 0) * 1deg)); transform: translate3d(calc(var(--x, 4) * 1vmin), calc(var(--y, 5) * 1vmin), calc(var(--z, 0) * 1vmin)) rotateX(-90deg) rotateY(calc(var(--rotate-cuboid-y, 0) * 1deg)) rotateZ(calc(var(--rotate-cuboid-z, 0) * 1deg)); } .cuboid > div:nth-of-type(1) { height: calc(var(--height) * 1vmin); width: 100%; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: rotateX(-90deg); transform: rotateX(-90deg); position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%) rotateX(-90deg) translate3d(0, 0, calc((var(--depth) / 2) * 1vmin)); transform: translate(-50%, -50%) rotateX(-90deg) translate3d(0, 0, calc((var(--depth) / 2) * 1vmin)); } .cuboid > div:nth-of-type(2) { height: calc(var(--height) * 1vmin); width: 100%; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform: translate(-50%, -50%) rotateX(-90deg) rotateY(180deg) translate3d(0, 0, calc((var(--depth) / 2) * 1vmin)); transform: translate(-50%, -50%) rotateX(-90deg) rotateY(180deg) translate3d(0, 0, calc((var(--depth) / 2) * 1vmin)); position: absolute; top: 50%; left: 50%; } .cuboid > div:nth-of-type(3) { height: calc(var(--height) * 1vmin); width: calc(var(--depth) * 1vmin); -webkit-transform: translate(-50%, -50%) rotateX(-90deg) rotateY(90deg) translate3d(0, 0, calc((var(--width) / 2) * 1vmin)); transform: translate(-50%, -50%) rotateX(-90deg) rotateY(90deg) translate3d(0, 0, calc((var(--width) / 2) * 1vmin)); position: absolute; top: 50%; left: 50%; } .cuboid > div:nth-of-type(4) { height: calc(var(--height) * 1vmin); width: calc(var(--depth) * 1vmin); -webkit-transform: translate(-50%, -50%) rotateX(-90deg) rotateY(-90deg) translate3d(0, 0, calc((var(--width) / 2) * 1vmin)); transform: translate(-50%, -50%) rotateX(-90deg) rotateY(-90deg) translate3d(0, 0, calc((var(--width) / 2) * 1vmin)); position: absolute; top: 50%; left: 50%; } .cuboid > div:nth-of-type(5) { height: calc(var(--depth) * 1vmin); width: calc(var(--width) * 1vmin); -webkit-transform: translate(-50%, -50%) translate3d(0, 0, calc((var(--height) / 2) * 1vmin)); transform: translate(-50%, -50%) translate3d(0, 0, calc((var(--height) / 2) * 1vmin)); position: absolute; top: 50%; left: 50%; } .cuboid > div:nth-of-type(6) { height: calc(var(--depth) * 1vmin); width: calc(var(--width) * 1vmin); -webkit-transform: translate(-50%, -50%) translate3d(0, 0, calc((var(--height) / 2) * -1vmin)) rotateX(180deg); transform: translate(-50%, -50%) translate3d(0, 0, calc((var(--height) / 2) * -1vmin)) rotateX(180deg); position: absolute; top: 50%; left: 50%; } .demo-cuboid > div { background: hsl(180, 50%, calc(var(--lightness, 50) * 1%)); } .demo-cuboid > div:nth-of-type(1), .demo-cuboid > div:nth-of-type(5) { --lightness: 40; } .demo-cuboid > div:nth-of-type(2), .demo-cuboid > div:nth-of-type(4) { --lightness: 50; } .demo-cuboid > div:nth-of-type(3) { --lightness: 60; } .cube-shadow { height: 100%; width: 100%; background: #40bfbf; -webkit-filter: blur(15px); filter: blur(15px); position: absolute; } .cube-spin, .cube-squish, .cube-wrap { height: 100%; width: 100%; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .cuboid__mouth { position: absolute; height: 3vmin; width: 3vmin; border-radius: 50%; background: #000; overflow: hidden; top: 45%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); clip-path: inset(50% 0 0 0); -webkit-clip-path: inset(50% 0 0 0); } .cuboid__mouth:after { content: ''; height: 35%; width: 45%; border-radius: 50%; position: absolute; bottom: -10%; right: 0; background: #e63b19; } .cuboid__eyes { width: 80%; position: absolute; top: 45%; left: 50%; -webkit-transform: translate(-50%, 0%); transform: translate(-50%, 0%); -webkit-animation: blink 5s infinite; animation: blink 5s infinite; } .cuboid__eyes > div { height: 2vmin; width: 2vmin; border-radius: 50%; background: #000; position: absolute; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); } .cuboid__eyes > div:after { content: ''; background: #fff; height: 20%; width: 20%; border-radius: 50%; position: absolute; top: 20%; left: 20%; } .cuboid__eyes > div:nth-of-type(1) { left: 0; } .cuboid__eyes > div:nth-of-type(2) { right: 0; } :checked ~ .scene { -webkit-animation: party var(--speed) infinite linear; animation: party var(--speed) infinite linear; } :checked ~ .scene .cuboid { -webkit-animation: flip calc(var(--speed) * 2) infinite ease-out; animation: flip calc(var(--speed) * 2) infinite ease-out; } :checked ~ .scene .cube-shadow { -webkit-animation: shadow var(--speed) infinite ease-out; animation: shadow var(--speed) infinite ease-out; } :checked ~ .scene .cube-spin { -webkit-animation: spin calc(var(--speed) * 2) var(--speed) infinite ease-out; animation: spin calc(var(--speed) * 2) var(--speed) infinite ease-out; } :checked ~ .scene .cube-squish { -webkit-animation: squish var(--speed) infinite ease-out; animation: squish var(--speed) infinite ease-out; } :checked ~ .scene .cube-wrap { -webkit-animation: jump var(--speed) infinite ease-out; animation: jump var(--speed) infinite ease-out; } :checked ~ .scene .cube-shadow { background: hsla(var(--hue, 0), 80%, 50%, 0.5); } :checked ~ .scene .demo-cuboid > div { background: hsl(var(--hue, 0), 80%, calc(var(--lightness, 50) * 1%)); } :checked ~ label { --on: 1; } :checked ~ label span { -webkit-animation: rock 0.1s infinite linear alternate; animation: rock 0.1s infinite linear alternate; } input { opacity: 0; height: 0; width: 0; position: fixed; left: 100%; } labe.........完整代码请登录后点击上方下载按钮下载查看
网友评论0