css实现三维金字塔变形为立方体动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现三维金字塔变形为立方体动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> :root { --boxColor: rgba(244, 175, 45, 0.7); --rotateSpeed: 30s; --bounceSpeed: 1.5s; } body { background-color: #000; min-height: 100vh; overflow: hidden; display: flex; justify-content: center; align-items: center; font-size: 75px; perspective: 10em; perspective-origin: 50% calc(50% - 2em); } .scene { position: relative; transform-style: preserve-3d; animation: sceneRotate var(--rotateSpeed) infinite linear; } @keyframes sceneRotate { to { transform: rotateY(360deg); } } .cube { width: 2em; height: 2em; transform-style: preserve-3d; position: absolute; bottom: -1em; left: -1em; } .cube * { transition: all 0.4s ease-in-out; } @keyframes topAnimate { 0%, 100% { transform: translateY(-50%) rotateX(90deg); clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); } 50% { transform: translateY(-36.5%) rotateX(90deg); clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%); } /* clip-path: polygon(10% 10%, 90% 10%, 90% 90%, 10% 90%); clip-path: polygon(20% 20%, 80% 20%, 80% 80%, 20% 80%); clip-path: polygon(30% 30%, 70% 30%, 70% 70%, 30% 70%); clip-path: polygon(40% 40%, 60% 40%, 60% 60%, 40% 60%); clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%); */ } @keyframes leftAnimate { 0%, 100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); transform: rotateY(270deg) translateZ(1em) rotateX(0deg); } 50% { clip-path: polygon(50% 0, 50% 0, 100% 100%, 0% 100%); transform: rotateY(270deg) translateZ(1em) rotateX(30deg); } } @keyframes rightAnimate { 0%, 100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); transform: rotateY(90deg) translateZ(1em) rotateX(0deg); } 50% { clip-path: polygon(50% 0, 50% 0, 100% 100%, 0% 100%); transform: rotateY(90deg) translateZ(1em) rotateX(30deg); } } @keyframes frontAnimate { 0%, 100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); transform: translateZ(1em) rotateX(0deg); } 50% { clip-path: polygon(50% 0, 50% 0, 100% 100%, 0% 100%); transform: translateZ(1em) rotateX(30deg); } } .........完整代码请登录后点击上方下载按钮下载查看
网友评论0