div+css实现三维20面体进入内部视角动画效果代码
代码语言:html
所属分类:动画
代码描述:div+css实现三维20面体进入内部视角动画效果代码,点击左上角按钮可进行视角切换。
代码标签: div css 三维 20 面体 进入 内部 视角 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; background-color: black; color: white; font-family: Segoe UI, sans-serif; min-height: 100vh; overflow: hidden; } .scene { perspective: 80rem; transition: perspective 1200ms ease-in-out; } .scene * { position: absolute; transform-style: preserve-3d; } .icosahedron { display: flex; justify-content: center; align-items: center; animation: rotate 80s linear infinite; } @keyframes rotate { from { transform: rotateX(-30deg) rotateY(0turn) rotateZ(0turn); } to { transform: rotateX(-30deg) rotateY(2turn) rotateZ(1turn); } } .triangle { width: 15rem; height: 12.9903810568rem; background-color: #fff; opacity: 0.95; clip-path: polygon(0% 100%, 50% 0%, 100% 100%); transform-origin: bottom center; transform: translateY(var(--ty, 0rem)) rotateX(var(--s, 0deg)) rotateY(var(--ry, 0deg)) translateZ(10.3228644035rem) rotateX(var(--rx, 0deg)); } .triangle::before { animation: cut 1s linear infinite alternate; content: ""; position: absolute; inset: 0; clip-path: polygon(0.5% 99.7%, 50% 1%, 99.5% 99.7%); background-color: hsl(var(--hue, 0deg), 100%, 15%); } .triangle:nth-child(1) { --hue: 70deg; --ry: 0deg; --rx: -10.54deg; } .triangle:nth-child(2) { --hue: 131deg; --ry: 72deg; --rx: -10.54deg; } .triangle:nth-child(3) { --hue: 124deg; --ry: 144deg; --rx: -10.54deg; } .triangle:nth-child(4) { --hue: 120deg; --ry: 216deg; --rx: -10.54deg; } .triangle:nth-child(5) { --hue: 132deg; --ry: 288deg; --rx: -10.54deg; } .triangle:nth-child(6) { --hue: 140deg; --ry: 360deg; --rx: -10.54deg; --ty: -12.7278810568rem; --s: 180deg; } .triangle:nth-child(7) { --hue: 95deg; --ry: 432deg; --rx: -10.54deg; --ty: -12.7278810568rem; --s: 180deg; } .triangle:nth-child(8) { --hue: 71deg; --ry: 504deg; --rx: -10.54deg; --ty: -12.7278810568rem; --s: 180deg; } .triangle:nth-child(9) { --hue: 64deg; --ry: 576deg; --rx: -10.54deg; --ty: -12.7278810568rem; --s: 180deg; } .triangle:nth-child(10) { --hue: 94deg; --ry: 648deg; --rx: -10.54deg; --ty: -12.7278810568rem; --s: 180deg; } .triangle:nth-child(11) { --hue: 142deg; --ry: 756deg; --rx: 52.7deg; --ty: -12.7278810568rem; } .triangle:nth-child(12) { --hue: 120deg; --ry: 828deg; --rx: 52.7deg; --ty: -12.7278810568rem; } .tri.........完整代码请登录后点击上方下载按钮下载查看
网友评论0