div+css实现白色长条旋转动画效果代码
代码语言:html
所属分类:动画
代码描述:div+css实现白色长条旋转动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> :root { --b: #262626; --w: #dcdcd2; } *, *:before, *:after { box-sizing: border-box; transform-style: preserve-3d; } body { margin: 0; padding: 0; width: 100vw; height: 100vh; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--b); } .content { width: 50vmin; height: 50vmin; text-align: center; display: flex; align-items: center; justify-content: center; flex-direction: column; perspective: 1000vmin; } @keyframes spin { 0%, 50% { transform: rotateY(0deg); } 100% { transform: rotateY(90deg); } } @keyframes lines { 0% { background-position: 0 0; } 50%, 100% { background-position: 0 50%; } } .cuboid { --height: 5; --width: 50; --depth: 20; --hue: 275; --sat: 60%; --lum: 50%; height: calc(var(--height) * 1vmin); width: calc(var(--width) * 1vmin); transform: translate3d(0vmin, 0vmin, 0vmin); animation: spin 3s ease 0s infinite; } .cuboid .side { position: absolute; top: 50%; left: 50%; height: 100%; width: 100%; border-radius: 2px; background: linear-gradient(180deg, var(--b) 0% 25%, var(--w) 25% 50%, var(--b) 50% 75%, var(--w) 75% 100%); background-size: 100% 200%; background-position: 0 0; animation: lines 3s ease 0s infinite; box-shadow: 0 0 0 0.1vmin var(--b); } .cuboid .side:nth-of-type(1) { transform: translate3d(-50%, -50%, calc(var(--depth) * 0.5vmin)); } .cuboid .side:nth-of-type(2) { transform: translate3d(-50%, -50%, calc(var(--depth) * -0.5vmin)) rotateY(180deg); } .cuboid .side:nth-of-type(3) { width: calc(var(--depth) * 1vmin); transform: translate(-50%, -50%) rotateY(90deg) translate3d(0, 0, calc(var(--width) * 0.5vmin)); } .cuboid .side:nth-of-type(4) { width: calc(var(--depth) * 1vmin); transform: translate(-50%, -50%) rotateY(-90deg) translate3d(0, 0, calc(var(--width) * 0.5vmin)); } .cuboid:nth-child(1), .cuboid:nth-child(12) { --width: 25; --depth: 25; } .cuboid:nth-child(2), .cuboid:nth-child(11) { --width: 32; --depth: 32; animation-delay: 0.1s; } .cuboid:nth-child(3), .cuboid:nth-child(10) { --width: 40; --depth: 40; animation-delay: 0.2s; } .cuboid:nth-child(4), .cuboid:nth-child(9) { --width: 45; --depth: 45; animation-delay: 0.3s; } .cuboid:nth-child(5), .cuboid:nth-child(8) { --width: 48; --depth: 48; animation-delay: 0.4s; } .cuboid:nth-child(6), .cuboid:nth-child(7) { --width: 50; --depth: 50; animation-delay: 0.5s; } .cuboid:nth-child(7) { animation-delay: 0.6s; } .cuboid:nth-child(8) { animation-delay: 0.7s; } .cuboid:nth-child(9) { animation-delay: 0.8s; } .cuboid:nth-child(10) { animation-delay: 0.9s; } .cuboid:nth-child(11) { animation-delay: 1s; } .cuboid:nth-child(12) { animation-delay: 1.1s; } .cuboid:nth-child(2) .side { animation-delay: 0.1s; } .cuboid:nth-child(3) .side { animation-delay: 0.2s; } .cuboid:nth-child(4) .side { animation-delay: 0.3s; } .cuboid:nth-child(5) .side { animation-delay: 0.4s; } .cuboid:nth-child(6) .side { animation-delay: 0.5s; } .cuboid:nth-child(7) .side { animation-delay: 0.6s; } .cuboid:nth-child(8) .side { animation-delay: 0.7s; } .cuboid:nth-child(9) .side { animation-delay: 0.8s; } .cuboid:nth-child(10) .side { animation-delay: 0.9s; } .cuboid:nth-child(11) .side { an.........完整代码请登录后点击上方下载按钮下载查看
网友评论0