css实现三维柱体依次上升无限循环动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现三维柱体依次上升无限循环动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { box-sizing: border-box; transform-style: preserve-3d; } :root { --perspective: 800; --rotate-x: -15; --rotate-y: -40; --cuboid-width: 10; --cuboid-height: 20; --cuboid-depth: 10; --scene: 20vmin; --gap: 3vmin; --duration: 8s; --travel: -10vmin; --hue: 280; --s-1: hsl(var(--hue), 30%, 50%); --s-2: hsl(var(--hue), 30%, 60%); --s-3: hsl(var(--hue), 30%, 70%); } body { min-height: 100vh; background: #1a1a1a; } .scene { perspective: calc(var(--perspective, 800) * 1px); height: 100vh; width: 100vw; display: flex; align-items: center; justify-content: center; } .plane { height: var(--scene); width: var(--scene); transform: rotateX(-32deg) rotateY(-34deg) rotateX(90deg) translate3d(0, 0, 0); } .towers { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); grid-gap: var(--gap); height: var(--scene); width: var(--scene); -webkit-animation: lower var(--duration) infinite linear; animation: lower var(--duration) infinite linear; } .cuboid { --width: 100; --height: var(--cuboid-height, 10); --depth: 100; height: 100%; width: 100%; position: relative; transform: none; } .cuboid__side { transition: transform 0.25s ease; } .cuboid > div:nth-of-type(1) { height: calc(var(--height) * 1vmin); width: calc(var(--width) * 1%); position: absolute; bottom: 0; left: 50%; transform-origin: 50% 100%; transform: translate(-50%, 0) rotateX(-90deg); background: linear-gradient(var(--s-1), transparent); } .cuboid > div:nth-of-type(2) { height: calc(var(--height) * 1vmin); width: calc(var(--width) * 1%); position: absolute; top: 0; left: 50%; transform-origin: 50% 0%; transform: translate(-50%, 0) rotateX(90deg); background: linear-gradient(transparent, var(--s-2)); } .cuboid > div:nth-of-type(3) { height: calc(var(--height) * 1vmin); width: calc(var(--width) * 1%); position: absolute; top: 0; left: 50%; transform-origin: 0% 0%; transform: translate(-50%, 0) rotateX(90deg) rotateY(90deg); background: linear-gradient(transparent, var(--s-1)); } .cuboid > div:nth-of-type(4) { height: calc(var(--height) * 1vmin); width: calc(var(--width) * 1%); position: absolute; top: 0; left: 50%; transform-origin: 100% 0%; transform: translate(-50%, 0) rotateX(90deg) rotateY(-90deg); background: linear-gradient(transparent, var(--s-2)); } .cuboid > div:nth-of-type(5) { height: calc(var(--width) * 1%); width: calc(var(--width) * 1%); transform: translate3d(-50%, -50%, calc(var(--cuboid-height) * 1vmin)); position: absolute; top: 50%; left: 50%; background: var(--s-3); } .tower { grid-column: var(--x); grid-row: var(--y); transform: translate3d(0, 0, calc(var(--cuboid-height) * -1vmin)); } .tower--0 { -webkit-animation: tower-0 var(--duration) infinite linear; animation: tower-0 var(--duration) infinite linear; } @-webkit-keyframes tower-0 { 0% { transform: translate3d(0, 0, var(--travel)); } 12.5%, 100% { transform: translate3d(0, 0, 0); } } @keyframes tower-0 { 0% { transform: translate3d(0, 0, var(--travel)); } 12.5%, 100% { transform: translate3d(0, 0, 0); } } .tower--1 { -webkit-animation: tower-1 var(--duration) infinite linear; animation: tower-1 var(--duration) infinite linear; } @-webkit-keyframes tower-1 { 0%, 12.5% { transform: translate3d(0, 0, var(--travel)); } 25%, 100% { transform: translate3d(0, 0, 0); } } @keyframes tower-1 { 0%, 12.5% { transform: translate3d(0, 0, var(--travel)); } 25%, 100% { transform: translate3d(0, 0, 0); } } .tower--2 { -webkit-animation: tower-2 var(--duration) infinite linear; animation: tower-2 var(--duration) infinite linear; } @-webkit-keyframes tower-2 { 0%, 25% { transform: translate3d(0, 0, var(--travel)); } 37.5%, 100% { transform: translate3d(0, 0, 0); } } @keyframes tower-2 { 0%, 25% { transform: translate3d(0, 0, var(--travel)); } 37.5%, 100% { transform: translate3d(0, 0, 0); } } .tower--3 { -webkit-animation: tower-3 var(--duration) infinite linear; animation: tower-3 var(--duration) infinite linear; } @-webkit-keyframes tower-3 { 0%, 37.5% { transform: translate3d(0, 0, var(--travel)); } 50%, 100% { transform: translate3d(0, 0, 0); } } @keyframes tower-3 { 0%, 37.5% { transform: translate3d(0, 0, var(--travel)); } 50%, 100% { transform: translate3d(0, 0, 0); } } .tower--4 { -webkit-animation: tower-4 var(--duration) infinite linear; animation: tower-4 var(--duration) infinite linear; } @-webkit-keyframes tower-4 { 0%, 50% { transform: translate3d(0, 0, var(--travel)); } 62.5%, 100% { transform: translate3d(0, 0, 0); } } @keyframes tower-4 { 0%, 50% { transform: translate3d(0, 0, var(--travel)); } 62.5%, 100% { transform: translate3d(0, 0, 0); } } .tower--5 { -webkit-animation: tower-5 var(--duration) infinite linear; animation: tower-5 var(--duration) infinite linear; } @-webkit-keyframes tower-5 { 0%, 62.5% { transform: translate3d(0, 0, var(--travel)); } .........完整代码请登录后点击上方下载按钮下载查看
网友评论0