div+css实现立方体拆分合并loading加载动画效果代码
代码语言:html
所属分类:加载滚动
代码描述:div+css实现立方体拆分合并loading加载动画效果代码
代码标签: div css 立方体 拆分 合并 loading 加载 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> :root { --c1: #b7ce63; --c2: #8fb339; --c3: #4b5842; --bg: #293124; --sp: 2s; --dl: -2s; --ttf: cubic-bezier(0.25, 0.46, 0.45, 0.94); } * { transform-style: preserve-3d; box-sizing: border-box; } body { margin: 0; padding: 0; width: 100vw; height: 100vh; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; background: radial-gradient(ellipse at 0% 100%, #fff0 0 80%, #fff2), radial-gradient(ellipse at 100% 0%, #fff0 0 80%, #222), var(--bg); perspective-origin: 50% 50%; perspective: 1500vmin; } .content { width: 40vmin; height: 40vmin; display: flex; align-items: center; justify-content: center; position: absolute; transition: all 0.33s ease 0s; transform: rotateX(50deg) rotate(45deg); margin-top: 18vmin; border-radius: 100%; animation: floating 2s ease-in-out -3s infinite alternate; } @keyframes floating { 50% { margin-top: 14vmin; } } .content:before { content: ""; position: absolute; width: 16vmin; height: 16vmin; background: #0001; animation: shadow 2s var(--ttf) var(--dl) infinite alternate; filter: blur(5px); transform: translateZ(-10vmin); } @keyframes shadow { 0%, 25% { width: 12vmin; height: 12vmin; transform: translateZ(-24vmin); filter: blur(10px); } 100% { width: 16vmin; height: 16vmin; transform: translateZ(-18vmin); } } @keyframes leaping-1 { 0%, 25% { transform: translateZ(2.5vmin); } 100% { transform: translateZ(-5vmin); } } @keyframes leaping-2 { 0%, 25% { transform: translateZ(2.5vmin); } 100% { transform: translateZ(22vmin); } } @keyframes leaping-3 { 0%, 25% { transform: translateZ(2.5vmin); } 100% { transform: translateZ(40vmin); } } .cuboid { --width: 20; --height: 20; --depth: 5.5; position: absolute; height: calc(var(--height) * 1vmin); width: calc(var(--width) * 1vmin); transform: translateZ(2.5vmin); animation: leaping-1 var(--sp) var(--ttf) var(--dl) infinite alternate; } .cuboid:nth-child(2) { --width: 12.2; --height: 12.2; transform: translateZ(2.65vmin); animation-name: leaping-2; } .cuboid:nth-child(3) { --width: 5.75; --height: 5.75; transform: translateZ(2.675vmin); animation-name: leaping-3; } .cuboid .side { position: absolute; top: 50%; left: 50%; height: 100%; width: 100%; border-radius: 2px; background: var(--c3); } .cuboid .side:nth-of-type(1) { transform: translate3d(-50%, -50%, calc(var(--depth) * 0.5vmin)); .........完整代码请登录后点击上方下载按钮下载查看
网友评论0