css实现三维3d盒子表面文字移动动画效果代码
代码语言:html
所属分类:三维
代码描述:css实现三维3d盒子表面文字移动动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css?family=Cute+Font&display=swap"); .box { width: 100%; height: 100%; transform-style: preserve-3d; } .box__surface { position: absolute; top: calc(50% - 100px); left: calc(50% - 100px); width: 200px; height: 200px; background: #1b2735; display: flex; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; overflow: hidden; text-align: center; } .box__surface:nth-child(1) { transform: translateZ(100px); -webkit-transform: translateZ(100px); } .box__surface:nth-child(1) .overall { animation: move1 12s infinite normal; -webkit-animation: move1 12s infinite normal; } .box__surface:nth-child(2) { transform: rotateY(90deg) translateZ(100px); -webkit-transform: rotateY(90deg) translateZ(100px); } .box__surface:nth-child(2) .overall { animation: move2 12s infinite normal; -webkit-animation: move2 12s infinite normal; } .box__surface:nth-child(3) { transform: rotateX(90deg) translateZ(100px); -webkit-transform: rotateX(90deg) translateZ(100px); } .box__surface:nth-child(3) .overall { animation: move3 12s infinite normal; -webkit-animation: move3 12s infinite normal; } .box__surface:nth-child(4) { transform: rotateX(-90deg) translateZ(100px); -webkit-transform: rotateX(-90deg) translateZ(100px); } .box__surface:nth-child(4) .overall { animation: move3 12s infinite normal; -webkit-animation: move3 12s infinite normal; } .box__surface:nth-child(5) { transform: rotateY(-90deg) translateZ(100px); -webkit-transform: rotateY(-90deg) translateZ(100px); } .box__surface:nth-child(5) .overall { animation: move2 12s infinite normal; -webkit-animation: move2 12s infinite normal; } .box__surface:nth-child(6) { transform: rotateY(180deg) translateZ(100px); -webkit-transform: rotateY(180deg) translateZ(100px); } .box__surface:nth-child(6) .overall { animation: move4 12s infinite normal; -webkit-animation: move4 12s infinite normal; } .overall { position: absolute; top: 0; left: 0; width: 800px; height: 800px; } .row { position: absolute; top: 0; left: 0; display: flex; display: -ms-flexbox; width: 800px; height: 200px; margin: 0; line-height: 200px; font-size: 80px; } .row:nth-of-type(1n) { top: 0; } .row:nth-of-type(2n) { top: 200px; } .row:nth-of-type(3n) { top: 400px; } .row:nth-of-type(4n) { top: 600px; } .row:nth-of-type(5n) { top: 800px; } .col { width: 200px; height: 200px; margin: 0; } .rotate-quaeter { transform: rotate(90deg); } .rotate-half { transform: rotate(180deg); } .rotate-three-quaeter { transform: rotate(270deg); } .container { transform-style: preserve-3d; animation: container 50s infinite linear; -webkit-animation: container 50s infinite linear; } .screen { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; transition: 500ms; transform-style: preserve-3d; } @-webkit-keyframes move1 { 0% { transform: translate(0, 0); } 9% { transform: translate(-200px, 0); } 18% { transform: translate(-200px, -200px); } 27% { transform: translate(-200px, -400px); } 36% { transform: translate(-400px, -400px); } 45% { transform: translate(-400px, -600px); } 54% { transform: translate(-400px, -800px); } 63% { transform: translate(-200px, -800px); } 72% { transform: translate(0, -800px); } 81% { transform: translate(0, -600px); } 82% { transform: translate(-400px, 0); } 84% { transform: translate(0, 0); } 95% { transform: translate(-400px, 0); } 100% { transform: translate(-400px, 0); } } @keyframes move1 { 0% { transform: translate(0, 0); } 9% { transform: translate(-200px, 0); } 18% { transform: translate(-200px, -200px); } 27% { transform: translate(-200px, -400px); } 36% { transform: translate(-400px, -400px); } 45% { transform: translate(-400px, -600px); } 54% { transform: translate(-400px, -800px); } 63% { transform: translate(-200px, -800px); } 72% { transform: translate(0, -800px); } 81% { transform: translate(0, -600px); } 82% { transform: translate(-400px, 0); } 84% { transform: translate(0, 0); } 95% { transform: translate(-400px, 0); } 100% { transform: translate(-400px, 0); } } @-webkit-keyframes move2 { 0% { transform: translate(0, 0); } 9% { transform: translate(-200px, 0); } 18% { transform: translate(-200px, 0); } 27% { transform: translate(-200px, 0); } 36% { transform: translate(-400px, 0); } 45% { transform: translate(-400px, 0); } 54% { transform: translate(-400px, 0); } 63% { transform: translate(-200px, 0); } 72% { transform: translate(0, 0); } 81% { transform: translate(0, 0); } 82% { transform: translate(-400px, 0); } 84% { transform: translate(0, 0); } 95% { transform: translate(-400px, 0); } 100% { transform: translate(-400px, 0); } } @keyframes move2 { 0% { transform: translate(0, 0); } 9% { transform: translate(-200px, 0); } 18% { transform: translate(-200px, 0); } 27% { transform: translate(-200px, 0); } 36% { transform: translate(-400px, 0); } 45% { transform: translate(-400px, 0); } 54% { transform: translate(-400px, 0); } 63% { transform: translate(-200px, 0); } 72% { transform: translate(0, 0); } 81% { transform: translate(0, 0); } 82% { transform: translate(-400px, 0); } 84% { transform: translate(0, 0); } 95% { transform: translate(-400px, 0); } 100% { transform: translate(-400px, 0); } } @-webkit-keyframes move3 { 0% { transform: translate(0, 0); } 9% { transform: translate(0, 0); } 18% { transform: translate(0, -200px); } 27% { transform: translate(0, -400px); } 36% { transform: translate(0, -400px); } 45% { transform: translate(0, -600px); } 54% { transform: translate(0, -800px); } 63% { transform: translate(0, -800px); } 72% { transform: translate(0, -800px); } 81% { transform: translate(0, -600px); } 82% { transform: translate(0, 0); } 100% { transform: translate(0, 0); } } @keyframes move3 { 0% { transform: translate(0, 0); } 9% { transform: translate(0, 0); } 18% { transform: translate(0, -200px); } 27% { transform: translate(0, -400px); } 36% { transform: translate(0, -400px); } 45% { transform: translate(0, -600px); } 54% { transform: translate(0, -800px); } 63% { transform: translate(0, -800px); } 72% { transform: translate(0, -800px); } 81% { transform: translate(0, -600px); } 82% { transform: translate(0, 0); } 100% { transform: translate(0, 0); } } @-webkit-keyframes move4 { 0% { transform: translate(0, -800px); } 9% { transform: translate(-200px, -800px); } 18% { transform: translate(-200px, -600px); } 27% { transform: translate(-200px, -400px); } 36% { transform: translate(-400px, -400px); } 45% { transform: translate(-400px, -200px); } 54% { transform: translate(-400px, 0); } 63% { transform: translate(-200px, 0); } 72% { transform: translate(0, 0); } 81% { transform: translate(0, -200px); } 82% { transform: translate(-400px, 0); } 84% { transform: translate(0, 0); } 95% { transform: translate(-400px, 0); } 100% { transform: translate(-400px, 0); } } @keyframes move4 { 0% { transform: translate(0, -800px); } 9% { transform: translate(-200px, -800px); } 18% { transform: translate(-200px, -600px); } 27% { transform: translate(-200px, -400px); } 36% { transform: translate(-400px, -400px); } 45% { transform: translate(-400px, -200px); } 54% { transform: translate(-400px, 0); } 63% { transform: translate(-200px, 0); } 72% { transform: translate(0, 0); } 81% { transform: translate(0, -200px); } 82% { transform: translate(-400px, 0); } 84% { transform: translate(0, 0); } 95% { transform: translate(-400px, 0); } 100% { transform: translate(-400px, 0); } } .rotate2-1 { animation: rotate2-1 12s infinite normal; -webkit-animation: rotate2-1 12s infinite normal; } .rotate2-2 { animation: rotate2-2 12s infinite normal; -webkit-animation: rotate2-2 12s infinite normal; } .rotate2-3 { animation: rotate2-3 12s infinite normal; -webkit-animation: rotate2-3 12s infinite normal; } .rotate3-1 { animation: rotate3-1 12s infinite normal; -webkit-animation: rotate3-1 12s infinite normal; } .rotate3-2 { animation: rotate3-2 12s infinite normal; -webkit-animation: rotate3-2 12s infinite normal; } .rotate3-3 { animation: rotate3-3 12s infinite normal; -webkit-animation: rotate3-3 12s infinite normal; } .rotate4-1 { animation: rotate4-1 12s infinite normal; -webkit-animation: rotate4-1 12s infinite normal; } .rotate4-2 { animation: rotate4-2 12s infinite normal; -webkit-animation: rotate4-2 12s infinite normal; } .rotate4-3 { animation: rotate4-3 12s infinite normal; -webkit-animation: rotate4-3 12s infinite normal; } .rotate5-1 { animation: rotate5-1 12s infinite normal; -webkit-animation: rotate5-1 12s infinite normal; } .rotate5-2 { animation: rotate5-2 12s infinite normal; -webkit-animation: rotate5-2 12s infinite normal; } .rotate5-3 { animation: rotate5-3 12s infinite normal; -webkit-animation: rotate5-3 12s infinite normal; } @-webkit-keyframes rotate2-1 { 0% { transform: rotate(0); } 45% { transform: rotate(0); } 54% { transform: rotate(90deg); } 63% { transform: rotate(180deg); } 72% { transform: rotate(180deg); } 81% { transform: rotate(90deg); } 82% { transform: rotate(0); } 100% { transform: rotate(0); } } @keyframes rotate2-1 { 0% { transform: rotate(0); } 45% { transform: rotate(0); } 54% { transform: rotate(90deg); } 63% { transform: rotate(180deg); } 72% { transform: rotate(180deg); } 81% { transform: rotate(90deg); } 82% { transform: rotate(0); } 100% { transform: rotate(0); } } @-webkit-keyframes rotate2-2 { 0% { transform: rotate(0); } 9% { transform: rotate(0); } 18% { transform: rotate(90deg); } 27% { transform: rotate(180deg); } 36% { transform: rotate(180deg); } 45% { transform: rotate(0); } 81% { transform: rotate(0); } 82% { transform: rotate(0); } 100% { transform: rotate(0); } } @keyframes rotate2-2 { 0% { transform: rotate(0); } 9% { transform: rotate(0); } 18% { transform: rotate(90deg); } 27% { transform: rotate(180deg); } 36% { transform: rotate(180deg); } 45% { transform: rotate(0); } 81% { transform: rotate(0); } 82% { transform: rotate(0); } 100% { transform: rotate(0); } } @-webkit-keyframes rotate2-3 { 0% { transform: rotate(180deg); } 36% { transform: rotate(180deg); } 45% { transform: rotate(270deg); } 54% { transform: rotate(360deg); } 81% { transform: rotate(360deg); } 82% { transform: rotate(180deg); } 100% { transform: rotate(180deg); } } @keyframes rotate2-3 { 0% { transform: rotate(180deg); } 36% { transform: rotate(180deg); } 45% { transform: rotate(270deg); } 54% { transform: rotate(360deg); } 81% { transform: rotate(360deg); } 82% { transform: rotate(180deg); } 100% { transform: rotate(180deg); } } @-webkit-keyframes rotate3-1 { 0% { transform: rotate(0); } 9% { transform: rotate(90deg); } 27% { transform: rotate(90deg); } 36% { transform: rotate(180deg); } 54% { transform: rotate(180deg); } .........完整代码请登录后点击上方下载按钮下载查看
网友评论0