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-color: #111; min-height: 100vh; display: grid; place-items: center; perspective: 50em; font-size: 8px; } *:not(:empty) { transform-style: preserve-3d; } .scene { position: relative; } .springOuter { position: absolute; -webkit-animation: springRotate 8s infinite linear; animation: springRotate 8s infinite linear; } @-webkit-keyframes springRotate { 0%, 4% { transform: rotateY(0deg); } 21%, 29% { transform: rotateY(-450deg); } 46%, 54% { transform: rotateY(-900deg); } 71%, 79% { transform: rotateY(-1350deg); } 96%, 100% { transform: rotateY(-1800deg); } } @keyframes springRotate { 0%, 4% { transform: rotateY(0deg); } 21%, 29% { transform: rotateY(-450deg); } 46%, 54% { transform: rotateY(-900deg); } 71%, 79% { transform: rotateY(-1350deg); } 96%, 100% { transform: rotateY(-1800deg); } } .spring { position: absolute; -webkit-animation: springBounce 1s infinite ease-out alternate; animation: springBounce 1s infinite ease-out alternate; --sy1: -4deg; --sy2: -14deg; } @-webkit-keyframes springBounce { 0%, 24% { transform: translateY(26em); } 100% { transform: translateY(-4em); } } @keyframes springBounce { 0%, 24% { transform: translateY(26em); } 100% { transform: translateY(-4em); } } .spring > div { position: absolute; left: -0.5em; bottom: 0; width: 1em; height: 0.75em; background-color: #fff; transform-style: preserve-3d; -webkit-animation: springHeight 2s infinite linear; animation: springHeight 2s infinite linear; } @-webkit-keyframes springHeight { 0%, 100% { transform: translateY(var(--ty1, -50%)) rotateY(var(--ry, 0deg)) translateZ(2.3em) skewY(var(--sy1, 0deg)); } 12%, 88% { transform: translateY(var(--ty2, -50%)) rotateY(var(--ry, 0deg)) translateZ(2.3em) skewY(var(--sy2, 0deg)); } } @keyframes springHeight { 0%, 100% { transform: translateY(var(--ty1, -50%)) rotateY(var(--ry, 0deg)) translateZ(2.3em) skewY(var(--sy1, 0deg)); } 12%, 88% { transform: translateY(var(--ty2, -50%)) rotateY(var(--ry, 0deg)) translateZ(2.3em) skewY(var(--sy2, 0deg)); } } .spring > div:nth-child(1) { --ry: 0deg; --ty1: 0em; --ty2: 0em; } .spring > div:nth-child(2) { --ry: 22.5deg; --ty1: -0.065em; --ty2: -0.2em; } .spring > div:nth-child(3) { --ry: 45deg; --ty1: -0.13em; --ty2: -0.4em; } .spring > div:nth-child(4) { --ry: 67.5deg; --ty1: -0.195em; --ty2: -0.6em; } .spring > div:nth-child(5) { --ry: 90deg; --ty1: -0.26em; --ty2: -0.8em; } .spring > div:nth-child(6) { --ry: 112.5deg; --ty1: -0.325em; --ty2: -1em; } .spring > div:nth-child(7) { --ry: 135deg; --ty1: -0.39em; --ty2: -1.2em; } .spring > div:nth-child(8) { --ry: 157.5deg; --ty1: -0.455em; --ty2: -1.4em; } .spring > div:nth-child(9) { --ry: 180deg; --ty1: -0.52em; --ty2: -1.6em; } .spring > div:nth-child(10) { --ry: 202.5deg; --ty1: -0.585em; --ty2: -1.8em; } .spring > div:nth-child(11) { --ry: 225deg; --ty1: -0.65em; --ty2: -2em; } .spring > div:nth-child(12) { --ry: 247.5deg; --ty1: -0.715em; --ty2: -2.2em; } .spring > div:nth-child(13) { --ry: 270deg; --ty1: -0.78em; --ty2: -2.4em; } .spring > div:nth-child(14) { --ry: 292.5deg; --ty1: -0.845em; --ty2: -2.6em; } .spring > div:nth-child(15) { --ry: 315deg; --ty1: -0.91em; --ty2: -2.8em; } .spring > div:nth-child(16) { --ry: 337.5deg; --ty1: -0.975em; --ty2: -3em; } .spring > div:nth-child(17) { --ry: 0deg; --ty1: -1.04em; --ty2: -3.2em; } .spring > div:nth-child(18) { --ry: 22.5deg; --ty1: -1.105em; --ty2: -3.4em; } .spring > div:nth-child(19) { --ry: 45deg; --ty1: -1.17em; --ty2: -3.6em; } .spring > div:nth-child(20) { --ry: 67.5deg; --ty1: -1.235em; --ty2: -3.8em; } .spring > div:nth-child(21) { --ry: 90deg; --ty1: -1.3em; --ty2: -4em; } .spring > div:nth-child(22) { --ry: 112.5deg; --ty1: -1.365em; --ty2: -4.2em; } .spring > div:nth-child(23) { --ry: 135deg; --ty1: -1.43em; --ty2: -4.4em; } .spring > div:nth-child(24) { --ry: 157.5deg; --ty1: -1.495em; --ty2: -4.6em; } .spring > div:nth-child(25) { --ry: 180deg; --ty1: -1.56em; --ty2: -4.8em; } .spring > div:nth-child(26) { --ry: 202.5deg; --ty1: -1.625em; --ty2: -5em; } .spring > div:nth-child(27) { --ry: 225deg; --ty1: -1.69em; --ty2: -5.2em; } .spring > div:nth-child(28) { --ry: 247.5deg; --ty1: -1.755em; --ty2: -5.4em; } .spring > div:nth-child(29) { --ry: 270deg; --ty1: -1.82em; --ty2: -5.6em; } .spring > div:nth-child(30) { --ry: 292.5deg; --ty1: -1.885em; --ty2: -5.8em; } .spring > div:nth-child(31) { --ry: 315deg; --ty1: -1.95em; --ty2: -6em; } .spring > div:nth-child(32) { --ry: 337.5deg; --ty1: -2.015em; --ty2: -6.2em; } .spring > div:nth-child(33) { --ry: 0deg; --ty1: -2.08em; --ty2: -6.4em; } .spring > div:nth-child(34) { --ry: 22.5deg; --ty1: -2.145em; --ty2: -6.6em; } .spring > div:nth-child(35) { --ry: 45deg; --ty1: -2.21em; --ty2: -6.8em; } .spring > div:nth-child(36) { --ry: 67.5deg; --ty1: -2.275em; --ty2: -7em; } .spring > div:nth-child(37) { --ry: 90deg; --ty1: -2.34em; --ty2: -7.2em; } .spring > div:nth-child(38) { --ry: 112.5deg; --ty1: -2.405em; --ty2: -7.4em; } .spring > div:nth-child(39) { --ry: 135deg; --ty1: -2.47em; --ty2: -7.6em; } .spring > div:nth-child(40) { --ry: 157.5deg; --ty1: -2.535em; --ty2: -7.8em; } .spring > div:nth-child(41) { --ry: 180deg; --ty1: -2.6em; --ty2: -8em; } .spring > div:nth-child(42) { --ry: 202.5deg; --ty1: -2.665em; --ty2: -8.2em; } .spring > div:nth-child(43) { --ry: 225deg; --ty1: -2.73em; --ty2: -8.4em; } .spring > div:nth-child(44) { --ry: 247.5deg; --ty1: -2.795em; --ty2: -8.6em; } .spring > div:nth-child(45) { --ry: 270deg; --ty1: -2.86em; --ty2: -8.8em; } .spring > div:nth-child(46) { --ry: 292.5deg; --ty1: -2.925em; --ty2: -9em; } .spring > div:nth-child(47) { --ry: 315deg; --ty1: -2.99em; --ty2: -9.2em; } .spring > div:nth-child(48) { --ry: 337.5deg; --ty1: -3.055em; --ty2: -9.4em; } .spring > div:nth-child(49) { --ry: 0deg; --ty1: -3.12em; --ty2: -9.6em; } .spring > div:nth-child(50) { --ry: 22.5deg; --ty1: -3.185em; --ty2: -9.8em; } .spring > div:nth-child(51) { --ry: 45deg; --ty1: -3.25em; --ty2: -10em; } .spring > div:nth-child(52) { --ry: 67.5deg; --ty1: -3.315em; --ty2: -10.2em; } .spring > div:nth-child(53) { --ry: 90deg; --ty1: -3.38em; --ty2: -10.4em; } .spring > div:nth-child(54) { --ry: 112.5deg; --ty1: -3.445em; --ty2: -10.6em; } .spring > div:nth-child(55) { --ry: 135deg; --ty1: -3.51em; --ty2: -10.8em; } .spring > div:nth-child(56) { --ry: 157.5deg; --ty1: -3.575em; --ty2: -11em; } .spring > div:nth-child(57) { --ry: 180deg; --ty1: -3.64em; --ty2: -11.2em; } .spring > div:nth-child(58) { --ry: 202.5deg; --ty1: -3.705em; --ty2: -11.4em; } .spring > div:nth-child(59) { --ry: 225deg; --ty1: -3.77em; --ty2: -11.6em; } .spring > div:nth-child(60) { --ry: 247.5deg; --ty1: -3.835em; --ty2: -11.8em; } .spring > div:nth-child(61) { --ry: 270deg; --ty1: -3.9em; --ty2: -12em; } .spring > div:nth-child(62) { --ry: 292.5deg; --ty1: -3.965em; --ty2: -12.2em; } .spring > div:nth-child(63) { --ry: 315deg; --ty1: -4.03em; --ty2: -12.4em; } .spring > div:nth-child(64) { --ry: 337.5deg; --ty1: -4.095em; --ty2: -12.6em; } .spring > div:nth-child(65) { --ry: 0deg; --ty1: -4.16em; --ty2: -12.8em; } .spring > div:nth-child(66) { --ry: 22.5deg; --ty1: -4.225em; --ty2: -13em; } .spring > div:nth-child(67) { --ry: 45deg; --ty1: -4.29em; --ty2: -13.2em; } .spring > div:nth-child(68) { --ry: 67.5deg; --ty1: -4.355em; --ty2: -13.4em; } .spring > div:nth-child(69) { --ry: 90deg; --ty1: -4.42em; --ty2: -13.6em; } .spring > div:nth-child(70) { --ry: 112.5deg; --ty1: -4.485em; --ty2: -13.8em; } .spring > div:nth-child(71) { --ry: 135deg; --ty1: -4.55em; --ty2: -14em; } .spring > div:nth-child(72) { --ry: 157.5deg; --ty1: -4.615em; --ty2: -14.2em; } .spring > div:nth-child(73) { --ry: 180deg; --ty1: -4.68em; --ty2: -14.4em; } .spring > div:nth-child(74) { --ry: 202.5deg; --ty1: -4.745em; --ty2: -14.6em; } .spring > div:nth-child(75) { --ry: 225deg; --ty1: -4.81em; --ty2: -14.8em; } .spring > div:nth-child(76) { --ry: 247.5deg; --ty1: -4.875em; --ty2: -15em; } .spring > div:nth-child(77) { --ry: 270deg; --ty1: -4.94em; --ty2: -15.2em; } .spring > div:nth-child(78) { --ry: 292.5deg; --ty1: -5.005em; --ty2: -15.4em; } .spring > div:nth-child(79) { --ry: 315deg; --ty1: -5.07em; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0