css实现wix三维文字字母跳跃动画效果代码
代码语言:html
所属分类:三维
代码描述:css实现wix三维文字字母跳跃动画效果代码花筒粒子动画效果代码,点击按钮试试
下面为部分代码预览,完整代码请点击下载或在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 at 50% bottom, #0005, #0000 25em), linear-gradient(#000, #678 calc(50% + 3em), #000); background-size: 100% calc(50% + 3em), 100% 100%; background-repeat: no-repeat; min-height: 100vh; display: grid; place-items: center; perspective: 1000px; } body *:not(:empty) { transform-style: preserve-3d; } .wix { position: relative; transform: translateY(10em) rotateX(-15deg); } .letter-translate { position: absolute; bottom: 0; -webkit-animation: letterTranslate 3s var(--delay) infinite ease-out; animation: letterTranslate 3s var(--delay) infinite ease-out; } @-webkit-keyframes letterTranslate { 0%, 25%, 75%, 100% { transform: translateY(0) scaleX(0.5); } 50% { transform: translateY(-10em) scaleX(0.5); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } @keyframes letterTranslate { 0%, 25%, 75%, 100% { transform: translateY(0) scaleX(0.5); } 50% { transform: translateY(-10em) scaleX(0.5); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } .letter-translate:nth-child(1) { left: -6em; --delay: -0.6s; } .letter-translate:nth-child(2) { left: 3em; --delay: -0.45s; } .letter-translate:nth-child(3) { left: 9em; --delay: -0.3s; } .letter-rotate { position: absolute; -webkit-animation: letterRotate 6s var(--delay) infinite ease-in-out; animation: letterRotate 6s var(--delay) infinite ease-in-out; } @-webkit-keyframes letterRotate { 0%, 12.5% { transform: rotateY(0deg); } 37.5%, 62.5% { transform: rotateY(180deg); } 87.5%, 100% { transform: rotateY(360deg); } } @keyframes letterRotate { 0%, 12.5% { transform: rotateY(0deg); } 37.5%, 62.5% { transform: rotateY(180deg); } 87.5%, 100% { transform: rotateY(360deg); } } .letter-scale { position: absolute; bottom: 0; width: 10em; height: 10em; transform-origin: bottom; -webkit-animation: letterScale 3s var(--delay) infinite ease-in; animation: letterScale 3s var(--delay) infinite ease-in; } @-webkit-keyframes letterScale { 0%, 22%, 100% { transform: translateX(-50%) scaleY(1); } 25%, 85% { transform: translateX(-50%) scaleY(0.8); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 75% { transform: translateX(-50%) scaleY(1.5); -webkit-animation-timing-function: linear; animation-timing-function: linear; } } @keyframes letterScale { 0%, 22%, 100% { transform: translateX(-50%) scaleY(1); } 25%, 85% { transform: translateX(-50%) scaleY(0.8); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 75% { transform: translateX(-50%) scaleY(1.5); -webkit-animation-timing-function: linear; animation-timing-function: linear; } } .letter-scale .front, .letter-scale .back { position: absolute; left: 0; top: 0; width: 100%; height: 100%; -webkit-animation: frontColor 3s var(--delay) infinite ease-in-out alternate; animation: frontColor 3s var(--delay) infinite ease-in-out alternate; } @-webkit-keyframes frontColor { 0%, 25% { background-color: #FBBD71; } 75%, 100% { background-color: #cd7406; } } @keyframes frontColor { 0%, 25% { background-color: #FBBD71; } 75%, 100% { background-color: #cd7406; } } .letter-scale .front { transform: translateZ(2em); } .letter-scale .back { transform: translateZ(-2em); animation-direction: alternate-reverse; } .letter-scale .side { position: absolute; left: 0; top: 0; height: 4em; background-image: linear-gradient(#cd7406, #FBBD71 40% 60%, #cd7406); background-size: 100% 250%; box-shadow: 0 0 1em #0004 inset; -webkit-animation: sideColor 6s var(--delay) infinite ease-in-out; animation: sideColor 6s var(--delay) infinite ease-in-out; } @-webkit-keyframes sideColor { 0%, 12.5%, 87.5%, 100% { background-position-y: 0%; } 37.5%, 62.5% { background-position-y: 100%; } } @keyframes sideColor { 0%, 12.5%, 87.5%, 100% { background-position-y: 0%; } 37.5%, 62.5% { background-position-y: 100%; } } .letter-w { width: 28em; height: 10em; } .letter-w .front, .letter-w .back { -webkit-clip-path: polygon(0 0, 4em 0, 10em 6em, 14em 2em, 18em 6em, 24em 0, 28em 0, 18em 10em, 14em 6em, 10em 10em); clip-path: polygon(0 0, 4em 0, 10em 6em, 14em 2em, 18em 6em, 24em 0, 28em 0, 18em 10em, 14em 6em, 10em 10em); } .letter-w .side:nth-child(1) { width: 4em; transform-origin: top; transform: translateZ(-2em) rotateX(90deg); } .letter-w .side:nth-child(2) { left: 4em; width: 8.5em; transform-origin: top left; transform: translateZ(-2em) rotateX(90deg) rotateY(45deg); } .letter-w .side:nth-child(3) { left: 14em; top: 2em; width: 5.65em; transform-origin: top left; transform: translateZ(-2em) rotateX(90deg) rotateY(135deg); } .letter-w .side:nth-child(4) { left: 14em; top: 2em; width: 5.65em; transform-origin: top left; transform: translateZ(-2em) rotateX(90deg) rotateY(45deg); } .letter-w .side:nth-child(5) { left: 24em; width: 8.5em; transform-origin: top left; transform: translateZ(-2em) rotateX(90deg) rotateY(135deg); } .letter-w .side:nth-child(6) { left: 24em; width: 4em; transform-origin: top; transform: translateZ(-2em) rotateX(90deg); } .letter-w .side:nth-child(7) { left: 28em; width: 14.14em; transform-origin: top left; transform: translateZ(-2em) rotateX(90deg) rotateY(135deg); } .letter-w .side:nth-child(8) { left: 14em; top: 6em; width: 5.65em; transform-origin: top left; transform: translateZ(-2em) rotateX(90deg) rotateY(45deg); } .letter-w .side:nth-child(9) { left: 14em; top: 6em; width: 5.65em; transform-origin: top left; transform: translateZ(-2em) rotateX(90deg) rotateY(135deg); } .letter-w .side:nth-child(10) { width: 14.14em; transform-origin: top left; transform: translateZ(-2em) rotateX(90deg) rotateY(45deg); } .letter-i { width: 3.5em; height: 10em; } .letter-i .side:nth-child(1) { width: 3.5em; transform-origin: top; transform: translateZ(-2em) rotateX(90deg); } .letter-i .side:nth-child(2) { left: 3.5em; width: 10em; transform-origin: top left; transform: translateZ(-2em) rotateX(90deg) rotateY(90deg); } .letter-i .side:nth-child(3) { top: 10em; width: 3.5em; transform-origin: top; transform: translateZ(-2em) rotateX(90deg); } .letter-i .side:nth-child(4) { width: 10em; transform-origin: top left; transform: translateZ(-2em) rotateX(90deg) rotateY(90deg); } .letter-x { width: 16em; height: 10em; } .letter-x .front, .letter-x .back { -webkit-clip-path: polygon(0 0, 4em 0, 8em 4em, 12em 0, 16em 0, 11em 5em, 16em 10em, 12em 10em, 8em 6em, 4em 10em, 0 10em, 5em 5em); clip-path: polygon(0 0, 4em 0, 8em 4em, 12em 0, 16em 0, 11em 5em, 16em 10em, 12em 10em, 8em 6em, 4em 10em, 0 10em, 5em 5em); } .letter-x .side:nth-child(1) { width: 4em; transform-origin: top; transform: translateZ(-2em) rotateX(90deg); } .letter-x .side:nth-child(2) { left: 4em; width: 5.65em; transform-origin: top left; transform: translateZ(-2em) rotateX(90deg) rotateY(45deg); } .letter-x .side:nth-child(3) { left: 12em; width: 5.65em; transform-origin: top left; transform: translateZ(-2em) rotateX(90deg) rotateY(135deg); .........完整代码请登录后点击上方下载按钮下载查看
网友评论0