css实现三维立方体盒子跳动loading动画效果代码
代码语言:html
所属分类:加载滚动
代码描述:css实现三维立方体盒子跳动loading动画效果代码
代码标签: css 三维 立方体 盒子 跳动 loading 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> *, *:after, *:before { box-sizing: border-box; transform-style: preserve-3d; } body { display: grid; place-items: center; min-height: 100vh; font-family: 'Google Sans', sans-serif, system-ui; } :root { --size: 120; --coefficient: 1px; --timeline: 2.6s; --delay: 0.65s; --rotation-y: -24; --rotation-x: 28; --color-one: #3a0ca3; --color-two: #4361ee; --color-three: #4cc9f0; } .scene { position: relative; transform: translate3d(0, 0, 100vmin) rotateX(calc(var(--rotation-y, 0) * 1deg)) rotateY(calc(var(--rotation-x, 0) * 1deg)) rotateX(0deg); } body { transform-origin: 50% 50%; -webkit-animation: scale var(--timeline) var(--delay) infinite linear; animation: scale var(--timeline) var(--delay) infinite linear; } @-webkit-keyframes scale { 0%, 10% { transform: scaleX(1) scaleY(1); } 35%, 100% { transform: scaleX(0.5) scaleY(0.5); } } @keyframes scale { 0%, 10% { transform: scaleX(1) scaleY(1); } 35%, 100% { transform: scaleX(0.5) scaleY(0.5); } } .shadow { width: calc(var(--size) * var(--coefficient)); position: absolute; bottom: 0; aspect-ratio: 1; transform-origin: 50% 50%; background: hsl(210 80% 50% / 0.2); transform: rotateX(90deg) translate3d(0, 0, calc((var(--size) * (var(--coefficient) * -0.5)) - 1px)) scale(0.96); -webkit-animation: squish-squosh var(--timeline) var(--delay) infinite, fade var(--timeline) var(--delay) infinite; animation: squish-squosh var(--timeline) var(--delay) infinite, fade var(--timeline) var(--delay) infinite; background: black; } .loader { --depth: var(--size); --color: var(--color-one, #8338EC); width: calc(var(--depth) * var(--coefficient)); aspect-ratio: 1; transform-origin: 50% 50%; -webkit-animation: squish-squosh var(--timeline) var(--delay) infinite; animation: squish-squosh var(--timeline) var(--delay) infinite; } .spinner { -webkit-animation: spin var(--timeline) var(--delay) infinite; animation: spin var(--timeline) var(--delay) infinite; } .jumper { -webkit-animation: jump var(--timeline) var(--delay) infinite; animation: jump var(--timeline) var(--delay) infinite; } @-webkit-keyframes squish-squosh { 0%, 50%, 60% { scale: 1 1 1; } 10%, 35% { scale: 1.2 0.8 1.2; } 25% { scale: 0.8 1.2 0.8; } 70% { scale: 1 1 2; } 80% { scale: 2 1 2; } 90%, 100% { scale: 2 2 2; } } @keyframes squish-squosh { 0%, 50%, 60% { scale: 1 1 1; } 10%, 35% { scale: 1.2 0.8 1.2; } 25% { scale: 0.8 1.2 0.8; } 70% { scale: 1 1 2; } 80% { scale: 2 1 2; } 90%, 100% { scale: 2 2 2; } } @-webkit-keyframes fade { 0%, 10%, 40%, 50%,.........完整代码请登录后点击上方下载按钮下载查看
网友评论0