css实现三维格子变形动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现三维格子变形动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> *, *::before, *::after { padding: 0; margin: 0 auto; box-sizing: border-box; } body { background-image: radial-gradient(circle, #fff, #777 100vmin); min-height: 100vh; display: grid; place-items: center; perspective: 800px; overflow: hidden; } body *:not(:empty) { transform-style: preserve-3d; } .scene { position: relative; -webkit-animation: scene 20s infinite linear; animation: scene 20s infinite linear; } @-webkit-keyframes scene { from { transform: rotate(0deg) rotateX(30deg) rotate(360deg); } to { transform: rotate(360deg) rotateX(30deg) rotate(0deg); } } @keyframes scene { from { transform: rotate(0deg) rotateX(30deg) rotate(360deg); } to { transform: rotate(360deg) rotateX(30deg) rotate(0deg); } } .auxetic { position: relative; font-size: 5vmin; width: 2em; aspect-ratio: 1; -webkit-animation-name: auxetic; animation-name: auxetic; --background-color: #fff; } @-webkit-keyframes auxetic { 0% { transform: rotate(0deg) scale(1); } 25% { transform: rotate(-22.5deg) scale(0.95); } 50% { transform: rotate(-45deg) scale(0.9); } 75% { transform: rotate(-67.5deg) scale(0.95); } 100% { transform: rotate(-90deg) scale(1); } } @keyframes auxetic { 0% { transform: rotate(0deg) scale(1); } 25% { transform: rotate(-22.5deg) scale(0.95); } 50% { transform: rotate(-45deg) scale(0.9); } 75% { transform: rotate(-67.5deg) scale(0.95); } 100% { transform: rotate(-90deg) scale(1); } } .cube { position: absolute; width: 100%; aspect-ratio: 1; transform-origin: -1% -1%; } .cube_A { left: 51%; top: 51%; -webkit-animation-name: cube_A; animation-name: cube_A; --background-color: hsl(calc(var(--i) * 90) 50% 56%); } .cube_A:nth-child(5) { --i: 0; } .cube_A:nth-child(6) { --i: 1; } .cube_A:nth-child(7) { --i: 2; } .cube_A:nth-child(8) { --i: 3; } @-webkit-keyframes cube_A { 0% { transform: rotate(calc(var(--i) * 90deg)) translate(-51%, 51%) rotate(0deg); } 50% { transform: rotate(calc(var(--i) * 90deg)) translate(-51%, 51%) rotate(90deg); } 100% { transform: rotate(calc(var(--i) * 90deg)) translate(-51%, 51%) rotate(180deg); } } @keyframes cube_A { 0% { transform: rotate(calc(var(--i) * 90deg)) translate(-51%, 51%) rotate(0deg); } 50% { transform: rotate(calc(var(--i) * 90deg)) translate(-51%, 51%) rotate(90deg); } 100% { transform: rotate(calc(var(--i) * 90deg)) translate(-51%, 51%) rotate(180deg); } } .cube_B { left: 102%; top: 0%; -webkit-animation-name: cube_negative; animation-name: cube_negative; --background-color: hsl(calc(var(--i) * 90 - 45) 50% 56%); } .cube_C { left: 102%; top: 0%; transform-origin: -1% 101%; -webkit-animation-name: cube_positive; animation-name: cube_positive; --background-color: hsl(calc(var(--i) * 90 - 67.5) 100% 56%); } .cube_D { left: 0%; top: 102%; transform-origin: 101% -1%; -webkit-animation-name: cube_negative; animation-name: cube_negative; --background-color: hsl(calc(var(--i) * 90) 100% 56%); } .cube_E { left: 102%; top: 0%; transform-origin: -1% 101%; -webkit-animation-name: cube_positive; animation-name: cube_positive; --background-color: hsl(calc(var(--i) * 90 - 22.5) 100% 56%); } .cube_F { left: 102%; top: 0%; -webkit-animation-name: cube_negative; animation-name: cube_negative; --background-color: hsl(calc(var(--i) * 90 - 45) 100% 56%); } @-webkit-keyframes cube_negative { 0% { transform: rotate(0deg); } 50% { transform: rotate(-90deg); } 100% { transform: rotate(-180deg); } } @keyframes cube_negative { 0% { transform: rotate(0deg); } 50% { transform: rotate(-90deg); } 100% { transform: rotate(-180deg); } } @-webkit-keyframes cube_positive { 0% { transform: rotate(0deg); } 50% { transform: rotate(90deg); } 100% { transform: rotate(180deg); } } @keyframes cube_positive { 0% { transform: rotate(0deg); } 50% { transform: rotate(90deg); } 100% { transform: rotate(180deg); } } .auxetic, .cube { box-shadow: 0 0 2em #000a, 0 0 1em #000a inset; -webkit-animation-duration: 8s; animation-duration: 8s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-timing-function.........完整代码请登录后点击上方下载按钮下载查看
网友评论0