纯css实现多彩纸形数字变动动画效果
代码语言:html
所属分类:动画
代码描述:纯css实现多彩纸形数字变动动画效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> HTML, BODY { height: 100vh; } BODY { display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; overflow: hidden; background: #000; } .scene { --col-0: black; --col-1: purple; --col-2: crimson; --col-3: orangered; --col-4: orange; --col-5: gold; --col-6: yellow; --col-7: yellowgreen; --col-8: mediumseagreen; --col-9: turquoise; --col-10: skyblue; --col-11: steelblue; --col-12: teal; --col-13: darkslateblue; --col-14: midnightblue; --col-15: indigo; --col-16: darkviolet; display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; width: 100%; -webkit-perspective: 300px; perspective: 300px; -webkit-perspective-origin: center center; perspective-origin: center center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; pointer-events: none; } .slices { position: relative; width: 130px; height: 205px; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-origin: center center; transform-origin: center center; -webkit-animation: rotateY 10s linear infinite; animation: rotateY 10s linear infinite; } .slice-wrapper { position: relative; width: 30px; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotateY(-90deg) translateX(-15px); transform: rotateY(-90deg) translateX(-15px); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; left: 119px; top: 96px; --angle: 52deg; -webkit-animation: start-point 25s linear infinite; animation: start-point 25s linear infinite; } .slice { width: 50px; height: 30px; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-origin: center top; transform-origin: center top; -webkit-animation-duration: 25s; animation-duration: 25s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .slice__content { position: relative; display: block; height: inherit; margin-bottom: -1px; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; background: -webkit-gradient(linear, left top, left bottom, from(var(--panel-col-1, pink)), to(var(--panel-col-2, turquoise))); background: linear-gradient(to bottom, var(--panel-col-1, pink), var(--panel-col-2, turquoise)); -webkit-clip-path: polygon(80% 0%, var(--mid-x-right, 100%) var(--mid-y-right, 40%), 80% 100%, 20% 100%, var(--mid-x-left, 0%) var(--mid-y-left, 70%), 20% 0%); clip-path: polygon(80% 0%, var(--mid-x-right, 100%) var(--mid-y-right, 40%), 80% 100%, 20% 100%, var(--mid-x-left, 0%) var(--mid-y-left, 70%), 20% 0%); -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(white), to(rgba(0, 0, 0, 0.35))); -webkit-mask-image: linear-gradient(white, rgba(0, 0, 0, 0.35)); mask-image: -webkit-gradient(linear, left top, left bottom, from(white), to(rgba(0, 0, 0, 0.35))); mask-image: linear-gradient(white, rgba(0, 0, 0, 0.35)); } .slice--0 { --panel-col-1: var(--col-1); --panel-col-2: var(--col-2); --mid-x-right: 75%; --mid-y-right: 45%; --mid-x-left: 24%; --mid-y-left: 55%; -webkit-transform: rotateX(52deg); transform: rotateX(52deg); height: 24.207px; -webkit-animation-name: slice-0; animation-name: slice-0; } .slice--1 { --panel-col-1: var(--col-2); --panel-col-2: var(--col-3); --mid-x-right: 67%; --mid-y-right: 47%; --mid-x-left: 31%; --mid-y-left: 32%; -webkit-transform: rotateX(12deg); transform: rotateX(12deg); height: 22.361px; -webkit-animation-name: slice-1; animation-name: slice-1; } .slice--2 { --panel-col-1: var(--col-3); --panel-col-2: var(--col-4); --mid-x-right: 79%; --mid-y-right: 33%; --mid-x-left: 43%; --mid-y-left: 37%; -webkit-transform: rotateX(27deg); transform: rotateX(27deg); height: 26px; -webkit-animation-name: slice-2; animation-name: slice-2; } .slice--3 { --panel-col-1: var(--col-4); --panel-col-2: var(--col-5); --mid-x-right: 74%; --mid-y-right: 34%; --mid-x-left: 25%; --mid-y-left: 21%; -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 20px; -webkit-animation-name: slice-3; animation-name: slice-3; } .slice--4 { --panel-col-1: var(--col-5); --panel-col-2: var(--col-6); --mid-x-right: 67%; --mid-y-right: 32%; --mid-x-left: 28%; --mid-y-left: 36%; -webkit-transform: rotateX(34deg); transform: rotateX(34deg); height: 25.239px; -webkit-animation-name: slice-4; animation-name: slice-4; } .slice--5 { --panel-col-1: var(--col-6); --panel-col-2: var(--col-7); --mid-x-right: 77%; --mid-y-right: 30%; --mid-x-left: 21%; --mid-y-left: 22%; -webkit-transform: rotateX(32deg); transform: rotateX(32deg); height: 28.636px; -webkit-animation-name: slice-5; animation-name: slice-5; } .slice--6 { --panel-col-1: var(--col-7); --panel-col-2: var(--col-8); --mid-x-right: 61%; --mid-y-right: 55%; --mid-x-left: 26%; --mid-y-left: 30%; -webkit-transform: rotateX(25deg); transform: rotateX(25deg); height: 20px; -webkit-animation-name: slice-6; animation-name: slice-6; } .slice--7 { --panel-col-1: var(--col-8); --panel-col-2: var(--col-9); --mid-x-right: 61%; --mid-y-right: 29%; --mid-x-left: 27%; --mid-y-left: 58%; -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 20px; -webkit-animation-name: slice-7; animation-name: slice-7; } .slice--8 { --panel-col-1: var(--col-9); --panel-col-2: var(--col-10); --mid-x-right: 61%; --mid-y-right: 32%; --mid-x-left: 22%; --mid-y-left: 52%; -webkit-transform: rotateX(31deg); transform: rotateX(31deg); height: 23.324px; -webkit-animation-name: slice-8; animation-name: slice-8; } .slice--9 { --panel-col-1: var(--col-10); --panel-col-2: var(--col-11); --mid-x-right: 62%; --mid-y-right: 45%; --mid-x-left: 27%; --mid-y-left: 50%; -webkit-transform: rotateX(23deg); transform: rotateX(23deg); height: 33.601px; -webkit-animation-name: slice-9; animation-name: slice-9; } .slice--10 { --panel-col-1: var(--col-11); --panel-col-2: var(--col-12); --mid-x-right: 70%; --mid-y-right: 45%; --mid-x-left: 35%; --mid-y-left: 49%; -webkit-transform: rotateX(35deg); transform: rotateX(35deg); height: 20px; -webkit-animation-name: slice-10; animation-name: slice-10; } .slice--11 { --panel-col-1: var(--col-12); --panel-col-2: var(--col-13); --mid-x-right: 67%; --mid-y-right: 34%; --mid-x-left: 28%; --mid-y-left: 55%; -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 20.013px; -webkit-animation-name: slice-11; animation-name: slice-11; } .slice--12 { --panel-col-1: var(--col-13); --panel-col-2: var(--col-14); --mid-x-right: 76%; --mid-y-right: 56%; --mid-x-left: 28%; --mid-y-left: 41%; -webkit-transform: rotateX(35deg); transform: rotateX(35deg); height: 28.844px; -webkit-animation-name: slice-12; animation-name: slice-12; } .slice--13 { --panel-col-1: var(--col-14); --panel-col-2: var(--col-15); --mid-x-right: 71%; --mid-y-right: 52%; --mid-x-left: 24%; --mid-y-left: 51%; -webkit-transform: rotateX(24deg); transform: rotateX(24deg); height: 29.682px; -webkit-animation-name: slice-13; animation-name: slice-13; } .slice--14 { --panel-col-1: var(--col-15); --panel-col-2: var(--col-16); --mid-x-right: 67%; --mid-y-right: 54%; --mid-x-left: 39%; --mid-y-left: 28%; -webkit-transform: rotateX(33deg); transform: rotateX(33deg); height: 21.014px; -webkit-animation-name: slice-14; animation-name: slice-14; } .slice--15 { --panel-col-1: var(--col-16); --panel-col-2: var(--col-1); --mid-x-right: 68%; --mid-y-right: 31%; --mid-x-left: 32%; --mid-y-left: 40%; -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 24.834px; -webkit-animation-name: slice-15; animation-name: slice-15; } .slice--16 { --panel-col-1: var(--col-1); --panel-col-2: var(--col-2); --mid-x-right: 73%; --mid-y-right: 47%; --mid-x-left: 28%; --mid-y-left: 42%; -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 60.157px; -webkit-animation-name: slice-16; animation-name: slice-16; } .slice--17 { --panel-col-1: var(--col-2); --panel-col-2: var(--col-3); --mid-x-right: 61%; --mid-y-right: 26%; --mid-x-left: 28%; --mid-y-left: 56%; -webkit-transform: rotateX(19deg); transform: rotateX(19deg); height: 29.732px; -webkit-animation-name: slice-17; animation-name: slice-17; } .slice--18 { --panel-col-1: var(--col-3); --panel-col-2: var(--col-4); --mid-x-right: 72%; --mid-y-right: 21%; --mid-x-left: 30%; --mid-y-left: 47%; -webkit-transform: rotateX(25deg); transform: rotateX(25deg); height: 26.87px; -webkit-animation-name: slice-18; animation-name: slice-18; } .slice--19 { --panel-col-1: var(--col-4); --panel-col-2: var(--col-5); --mid-x-right: 70%; --mid-y-right: 57%; --mid-x-left: 42%; --mid-y-left: 60%; -webkit-transform: rotateX(27deg); transform: rotateX(27deg); height: 23.087px; -webkit-animation-name: slice-19; animation-name: slice-19; } .slice--20 { --panel-col-1: var(--col-5); --panel-col-2: var(--col-6); --mid-x-right: 73%; --mid-y-right: 43%; --mid-x-left: 35%; --mid-y-left: 46%; -webkit-transform: rotateX(18deg); transform: rotateX(18deg); height: 68px; -webkit-animation-name: slice-20; animation-name: slice-20; } @-webkit-keyframes rotateY { 0% { -webkit-transform: rotateY(0); transform: rotateY(0); } 100% { -webkit-transform: rotateY(360deg); transform: rotateY(360deg); } } @keyframes rotateY { 0% { -webkit-transform: rotateY(0); transform: rotateY(0); } 100% { -webkit-transform: rotateY(360deg); transform: rotateY(360deg); } } @-webkit-keyframes start-point { 7.5% { top: 103px; left: 50px; } 12.5% { top: 103px; left: 50px; } 17.5% { top: 1.94px; left: 7px; } 22.5% { top: 1.94px; left: 7px; } 27.5% { top: 105px; left: 1px; } 32.5% { top: 105px; left: 1px; } 37.5% { top: 0px; left: 129px; } 42.5% { top: 0px; left: 129px; } 47.5% { top: 0px; left: 60px; } 52.5% { top: 0px; left: 60px; } 57.5% { top: 180px; left: 0px; } 62.5% { top: 180px; left: 0px; } 67.5% { top: 35px; left: 6px; } 72.5% { top: 35px; left: 6px; } 77.5% { top: 203.91px; left: 82.91px; } 82.5% { top: 203.91px; left: 82.91px; } } @keyframes start-point { 7.5% { top: 103px; left: 50px; } 12.5% { top: 103px; left: 50px; } 17.5% { top: 1.94px; left: 7px; } 22.5% { top: 1.94px; left: 7px; } 27.5% { top: 105px; left: 1px; } 32.5% { top: 105px; left: 1px; } 37.5% { top: 0px; left: 129px; } 42.5% { top: 0px; left: 129px; } 47.5% { top: 0px; left: 60px; } 52.5% { top: 0px; left: 60px; } 57.5% { top: 180px; left: 0px; } 62.5% { top: 180px; left: 0px; } 67.5% { top: 35px; left: 6px; } 72.5% { top: 35px; left: 6px; } 77.5% { top: 203.91px; left: 82.91px; } 82.5% { top: 203.91px; left: 82.91px; } } @-webkit-keyframes slice-0 { 2.5% { -webkit-transform: rotateX(52deg); transform: rotateX(52deg); height: 24.207px; } 7.5% { -webkit-transform: rotateX(-119deg); transform: rotateX(-119deg); height: 35.892px; } 12.5% { -webkit-transform: rotateX(-119deg); transform: rotateX(-119deg); height: 35.892px; } 17.5% { -webkit-transform: rotateX(-90deg); transform: rotateX(-90deg); height: 19px; } 22.5% { -webkit-transform: rotateX(-90deg); transform: rotateX(-90deg); height: 19px; } 27.5% { -webkit-transform: rotateX(-128deg); transform: rotateX(-128deg); height: 24.207px; } 32.5% { -webkit-transform: rotateX(-128deg); transform: rotateX(-128deg); height: 24.207px; } 37.5% { -webkit-transform: rotateX(90deg); transform: rotateX(90deg); height: 43px; } 42.5% { -webkit-transform: rotateX(90deg); transform: rotateX(90deg); height: 43px; } 47.5% { -webkit-transform: rotateX(30deg); transform: rotateX(30deg); height: 26.662px; } 52.5% { -webkit-transform: rotateX(30deg); transform: rotateX(30deg); height: 26.662px; } 57.5% { -webkit-transform: rotateX(-60deg); transform: rotateX(-60deg); height: 19.471px; } 62.5% { -webkit-transform: rotateX(-60deg); transform: rotateX(-60deg); height: 19.471px; } 67.5% { -webkit-transform: rotateX(-137deg); transform: rotateX(-137deg); height: 25.695px; } 72.5% { -webkit-transform: rotateX(-137deg); transform: rotateX(-137deg); height: 25.695px; } 77.5% { -webkit-transform: rotateX(-179deg); transform: rotateX(-179deg); height: 16.021px; } 82.5% { -webkit-transform: rotateX(-179deg); transform: rotateX(-179deg); height: 16.021px; } } @keyframes slice-0 { 2.5% { -webkit-transform: rotateX(52deg); transform: rotateX(52deg); height: 24.207px; } 7.5% { -webkit-transform: rotateX(-119deg); transform: rotateX(-119deg); height: 35.892px; } 12.5% { -webkit-transform: rotateX(-119deg); transform: rotateX(-119deg); height: 35.892px; } 17.5% { -webkit-transform: rotateX(-90deg); transform: rotateX(-90deg); height: 19px; } 22.5% { -webkit-transform: rotateX(-90deg); transform: rotateX(-90deg); height: 19px; } 27.5% { -webkit-transform: rotateX(-128deg); transform: rotateX(-128deg); height: 24.207px; } 32.5% { -webkit-transform: rotateX(-128deg); transform: rotateX(-128deg); height: 24.207px; } 37.5% { -webkit-transform: rotateX(90deg); transform: rotateX(90deg); height: 43px; } 42.5% { -webkit-transform: rotateX(90deg); transform: rotateX(90deg); height: 43px; } 47.5% { -webkit-transform: rotateX(30deg); transform: rotateX(30deg); height: 26.662px; } 52.5% { -webkit-transform: rotateX(30deg); transform: rotateX(30deg); height: 26.662px; } 57.5% { -webkit-transform: rotateX(-60deg); transform: rotateX(-60deg); height: 19.471px; } 62.5% { -webkit-transform: rotateX(-60deg); transform: rotateX(-60deg); height: 19.471px; } 67.5% { -webkit-transform: rotateX(-137deg); transform: rotateX(-137deg); height: 25.695px; } 72.5% { -webkit-transform: rotateX(-137deg); transform: rotateX(-137deg); height: 25.695px; } 77.5% { -webkit-transform: rotateX(-179deg); transform: rotateX(-179deg); height: 16.021px; } 82.5% { -webkit-transform: rotateX(-179deg); transform: rotateX(-179deg); height: 16.021px; } } @-webkit-keyframes slice-1 { 2.5% { -webkit-transform: rotateX(12deg); transform: rotateX(12deg); height: 22.361px; } 7.5% { -webkit-transform: rotateX(-26deg); transform: rotateX(-26deg); height: 30.702px; } 12.5% { -webkit-transform: rotateX(-26deg); transform: rotateX(-26deg); height: 30.702px; } 17.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 20px; } 22.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 20px; } 27.5% { -webkit-transform: rotateX(12deg); transform: rotateX(12deg); height: 22.361px; } 32.5% { -webkit-transform: rotateX(12deg); transform: rotateX(12deg); height: 22.361px; } 37.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 40px; } 42.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 40px; } 47.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 25.31px; } 52.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 25.31px; } 57.5% { -webkit-transform: rotateX(-5deg); transform: rotateX(-5deg); height: 23.508px; } 62.5% { -webkit-transform: rotateX(-5deg); transform: rotateX(-5deg); height: 23.508px; } 67.5% { -webkit-transform: rotateX(7deg); transform: rotateX(7deg); height: 25.321px; } 72.5% { -webkit-transform: rotateX(7deg); transform: rotateX(7deg); height: 25.321px; } 77.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 16.763px; } 82.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 16.763px; } } @keyframes slice-1 { 2.5% { -webkit-transform: rotateX(12deg); transform: rotateX(12deg); height: 22.361px; } 7.5% { -webkit-transform: rotateX(-26deg); transform: rotateX(-26deg); height: 30.702px; } 12.5% { -webkit-transform: rotateX(-26deg); transform: rotateX(-26deg); height: 30.702px; } 17.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 20px; } 22.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 20px; } 27.5% { -webkit-transform: rotateX(12deg); transform: rotateX(12deg); height: 22.361px; } 32.5% { -webkit-transform: rotateX(12deg); transform: rotateX(12deg); height: 22.361px; } 37.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 40px; } 42.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 40px; } 47.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 25.31px; } 52.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 25.31px; } 57.5% { -webkit-transform: rotateX(-5deg); transform: rotateX(-5deg); height: 23.508px; } 62.5% { -webkit-transform: rotateX(-5deg); transform: rotateX(-5deg); height: 23.508px; } 67.5% { -webkit-transform: rotateX(7deg); transform: rotateX(7deg); height: 25.321px; } 72.5% { -webkit-transform: rotateX(7deg); transform: rotateX(7deg); height: 25.321px; } 77.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 16.763px; } 82.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 16.763px; } } @-webkit-keyframes slice-2 { 2.5% { -webkit-transform: rotateX(27deg); transform: rotateX(27deg); height: 26px; } 7.5% { -webkit-transform: rotateX(-36deg); transform: rotateX(-36deg); height: 27px; } 12.5% { -webkit-transform: rotateX(-36deg); transform: rotateX(-36deg); height: 27px; } 17.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 19px; } 22.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 19px; } 27.5% { -webkit-transform: rotateX(27deg); transform: rotateX(27deg); height: 26px; } 32.5% { -webkit-transform: rotateX(27deg); transform: rotateX(27deg); height: 26px; } 37.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 22px; } 42.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 22px; } 47.5% { -webkit-transform: rotateX(2deg); transform: rotateX(2deg); height: 10.759px; } 52.5% { -webkit-transform: rotateX(2deg); transform: rotateX(2deg); height: 10.759px; } 57.5% { -webkit-transform: rotateX(-26deg); transform: rotateX(-26deg); height: 40px; } 62.5% { -webkit-transform: rotateX(-26deg); transform: rotateX(-26deg); height: 40px; } 67.5% { -webkit-transform: rotateX(40deg); transform: rotateX(40deg); height: 36px; } 72.5% { -webkit-transform: rotateX(40deg); transform: rotateX(40deg); height: 36px; } 77.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 13.05px; } 82.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 13.05px; } } @keyframes slice-2 { 2.5% { -webkit-transform: rotateX(27deg); transform: rotateX(27deg); height: 26px; } 7.5% { -webkit-transform: rotateX(-36deg); transform: rotateX(-36deg); height: 27px; } 12.5% { -webkit-transform: rotateX(-36deg); transform: rotateX(-36deg); height: 27px; } 17.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 19px; } 22.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 19px; } 27.5% { -webkit-transform: rotateX(27deg); transform: rotateX(27deg); height: 26px; } 32.5% { -webkit-transform: rotateX(27deg); transform: rotateX(27deg); height: 26px; } 37.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 22px; } 42.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 22px; } 47.5% { -webkit-transform: rotateX(2deg); transform: rotateX(2deg); height: 10.759px; } 52.5% { -webkit-transform: rotateX(2deg); transform: rotateX(2deg); height: 10.759px; } 57.5% { -webkit-transform: rotateX(-26deg); transform: rotateX(-26deg); height: 40px; } 62.5% { -webkit-transform: rotateX(-26deg); transform: rotateX(-26deg); height: 40px; } 67.5% { -webkit-transform: rotateX(40deg); transform: rotateX(40deg); height: 36px; } 72.5% { -webkit-transform: rotateX(40deg); transform: rotateX(40deg); height: 36px; } 77.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 13.05px; } 82.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 13.05px; } } @-webkit-keyframes slice-3 { 2.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 20px; } 7.5% { -webkit-transform: rotateX(-45deg); transform: rotateX(-45deg); height: 25.433px; } 12.5% { -webkit-transform: rotateX(-45deg); transform: rotateX(-45deg); height: 25.433px; } 17.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 21px; } 22.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 21px; } 27.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 20px; } 32.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 20px; } 37.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 18px; } 42.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 18px; } 47.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 16.377px; } 52.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 16.377px; } 57.5% { -webkit-transform: rotateX(-35deg); transform: rotateX(-35deg); height: 27.877px; } 62.5% { -webkit-transform: rotateX(-35deg); transform: rotateX(-35deg); height: 27.877px; } 67.5% { -webkit-transform: rotateX(23deg); transform: rotateX(23deg); height: 14.426px; } 72.5% { -webkit-transform: rotateX(23deg); transform: rotateX(23deg); height: 14.426px; } 77.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 11.876px; } 82.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 11.876px; } } @keyframes slice-3 { 2.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 20px; } 7.5% { -webkit-transform: rotateX(-45deg); transform: rotateX(-45deg); height: 25.433px; } 12.5% { -webkit-transform: rotateX(-45deg); transform: rotateX(-45deg); height: 25.433px; } 17.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 21px; } 22.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 21px; } 27.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 20px; } 32.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 20px; } 37.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 18px; } 42.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 18px; } 47.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 16.377px; } 52.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 16.377px; } 57.5% { -webkit-transform: rotateX(-35deg); transform: rotateX(-35deg); height: 27.877px; } 62.5% { -webkit-transform: rotateX(-35deg); transform: rotateX(-35deg); height: 27.877px; } 67.5% { -webkit-transform: rotateX(23deg); transform: rotateX(23deg); height: 14.426px; } 72.5% { -webkit-transform: rotateX(23deg); transform: rotateX(23deg); height: 14.426px; } 77.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 11.876px; } 82.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 11.876px; } } @-webkit-keyframes slice-4 { 2.5% { -webkit-transform: rotateX(34deg); transform: rotateX(34deg); height: 25.239px; } 7.5% { -webkit-transform: rotateX(-10deg); transform: rotateX(-10deg); height: 26.039px; } 12.5% { -webkit-transform: rotateX(-10deg); transform: rotateX(-10deg); height: 26.039px; } 17.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 20px; } 22.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 20px; } 27.5% { -webkit-transform: rotateX(34deg); transform: rotateX(34deg); height: 25.239px; } 32.5% { -webkit-transform: rotateX(34deg); transform: rotateX(34deg); height: 25.239px; } 37.5% { -webkit-transform: rotateX(-90deg); transform: rotateX(-90deg); height: 20px; } 42.5% { -webkit-transform: rotateX(-90deg); transform: rotateX(-90deg); height: 20px; } 47.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 18.649px; } 52.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 18.649px; } 57.5% { -webkit-transform: rotateX(-3deg); transform: rotateX(-3deg); height: 22.94px; } 62.5% { -webkit-transform: rotateX(-3deg); transform: rotateX(-3deg); height: 22.94px; } 67.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 16.037px; } 72.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 16.037px; } 77.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 13.059px; } 82.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 13.059px; } } @keyframes slice-4 { 2.5% { -webkit-transform: rotateX(34deg); transform: rotateX(34deg); height: 25.239px; } 7.5% { -webkit-transform: rotateX(-10deg); transform: rotateX(-10deg); height: 26.039px; } 12.5% { -webkit-transform: rotateX(-10deg); transform: rotateX(-10deg); height: 26.039px; } 17.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 20px; } 22.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 20px; } 27.5% { -webkit-transform: rotateX(34deg); transform: rotateX(34deg); height: 25.239px; } 32.5% { -webkit-transform: rotateX(34deg); transform: rotateX(34deg); height: 25.239px; } 37.5% { -webkit-transform: rotateX(-90deg); transform: rotateX(-90deg); height: 20px; } 42.5% { -webkit-transform: rotateX(-90deg); transform: rotateX(-90deg); height: 20px; } 47.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 18.649px; } 52.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 18.649px; } 57.5% { -webkit-transform: rotateX(-3deg); transform: rotateX(-3deg); height: 22.94px; } 62.5% { -webkit-transform: rotateX(-3deg); transform: rotateX(-3deg); height: 22.94px; } 67.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 16.037px; } 72.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 16.037px; } 77.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 13.059px; } 82.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 13.059px; } } @-webkit-keyframes slice-5 { 2.5% { -webkit-transform: rotateX(32deg); transform: rotateX(32deg); height: 28.636px; } 7.5% { -webkit-transform: rotateX(-32deg); transform: rotateX(-32deg); height: 19.634px; } 12.5% { -webkit-transform: rotateX(-32deg); transform: rotateX(-32deg); height: 19.634px; } 17.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 19px; } 22.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 19px; } 27.5% { -webkit-transform: rotateX(32deg); transform: rotateX(32deg); height: 28.636px; } 32.5% { -webkit-transform: rotateX(32deg); transform: rotateX(32deg); height: 28.636px; } 37.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 20px; } 42.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 20px; } 47.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 18.875px; } 52.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 18.875px; } 57.5% { -webkit-transform: rotateX(-52deg); transform: rotateX(-52deg); height: 37px; } 62.5% { -webkit-transform: rotateX(-52deg); transform: rotateX(-52deg); height: 37px; } 67.5% { -webkit-transform: rotateX(39deg); transform: rotateX(39deg); height: 25.942px; } 72.5% { -webkit-transform: rotateX(39deg); transform: rotateX(39deg); height: 25.942px; } 77.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 11.718px; } 82.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 11.718px; } } @keyframes slice-5 { 2.5% { -webkit-transform: rotateX(32deg); transform: rotateX(32deg); height: 28.636px; } 7.5% { -webkit-transform: rotateX(-32deg); transform: rotateX(-32deg); height: 19.634px; } 12.5% { -webkit-transform: rotateX(-32deg); transform: rotateX(-32deg); height: 19.634px; } 17.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 19px; } 22.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 19px; } 27.5% { -webkit-transform: rotateX(32deg); transform: rotateX(32deg); height: 28.636px; } 32.5% { -webkit-transform: rotateX(32deg); transform: rotateX(32deg); height: 28.636px; } 37.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 20px; } 42.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 20px; } 47.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 18.875px; } 52.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 18.875px; } 57.5% { -webkit-transform: rotateX(-52deg); transform: rotateX(-52deg); height: 37px; } 62.5% { -webkit-transform: rotateX(-52deg); transform: rotateX(-52deg); height: 37px; } 67.5% { -webkit-transform: rotateX(39deg); transform: rotateX(39deg); height: 25.942px; } 72.5% { -webkit-transform: rotateX(39deg); transform: rotateX(39deg); height: 25.942px; } 77.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 11.718px; } 82.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 11.718px; } } @-webkit-keyframes slice-6 { 2.5% { -webkit-transform: rotateX(25deg); transform: rotateX(25deg); height: 20px; } 7.5% { -webkit-transform: rotateX(-36deg); transform: rotateX(-36deg); height: 29.14px; } 12.5% { -webkit-transform: rotateX(-36deg); transform: rotateX(-36deg); height: 29.14px; } 17.5% { -webkit-transform: rotateX(119deg); transform: rotateX(119deg); height: 19.869px; } 22.5% { -webkit-transform: rotateX(119deg); transform: rotateX(119deg); height: 19.869px; } 27.5% { -webkit-transform: rotateX(25deg); transform: rotateX(25deg); height: 20px; } 32.5% { -webkit-transform: rotateX(25deg); transform: rotateX(25deg); height: 20px; } 37.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 20px; } 42.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 20px; } 47.5% { -webkit-transform: rotateX(-122deg); transform: rotateX(-122deg); height: 20px; } 52.5% { -webkit-transform: rotateX(-122deg); transform: rotateX(-122deg); height: 20px; } 57.5% { -webkit-transform: rotateX(-47deg); transform: rotateX(-47deg); height: 26.173px; } 62.5% { -webkit-transform: rotateX(-47deg); transform: rotateX(-47deg); height: 26.173px; } 67.5% { -webkit-transform: rotateX(29deg); transform: rotateX(29deg); height: 35.014px; } 72.5% { -webkit-transform: rotateX(29deg); transform: rotateX(29deg); height: 35.014px; } 77.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 15.042px; } 82.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 15.042px; } } @keyframes slice-6 { 2.5% { -webkit-transform: rotateX(25deg); transform: rotateX(25deg); height: 20px; } 7.5% { -webkit-transform: rotateX(-36deg); transform: rotateX(-36deg); height: 29.14px; } 12.5% { -webkit-transform: rotateX(-36deg); transform: rotateX(-36deg); height: 29.14px; } 17.5% { -webkit-transform: rotateX(119deg); transform: rotateX(119deg); height: 19.869px; } 22.5% { -webkit-transform: rotateX(119deg); transform: rotateX(119deg); height: 19.869px; } 27.5% { -webkit-transform: rotateX(25deg); transform: rotateX(25deg); height: 20px; } 32.5% { -webkit-transform: rotateX(25deg); transform: rotateX(25deg); height: 20px; } 37.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 20px; } 42.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 20px; } 47.5% { -webkit-transform: rotateX(-122deg); transform: rotateX(-122deg); height: 20px; } 52.5% { -webkit-transform: rotateX(-122deg); transform: rotateX(-122deg); height: 20px; } 57.5% { -webkit-transform: rotateX(-47deg); transform: rotateX(-47deg); height: 26.173px; } 62.5% { -webkit-transform: rotateX(-47deg); transform: rotateX(-47deg); height: 26.173px; } 67.5% { -webkit-transform: rotateX(29deg); transform: rotateX(29deg); height: 35.014px; } 72.5% { -webkit-transform: rotateX(29deg); transform: rotateX(29deg); height: 35.014px; } 77.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 15.042px; } 82.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 15.042px; } } @-webkit-keyframes slice-7 { 2.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 20px; } 7.5% { -webkit-transform: rotateX(-14deg); transform: rotateX(-14deg); height: 24.268px; } 12.5% { -webkit-transform: rotateX(-14deg); transform: rotateX(-14deg); height: 24.268px; } 17.5% { -webkit-transform: rotateX(3deg); transform: rotateX(3deg); height: 12.792px; } 22.5% { -webkit-transform: rotateX(3deg); transform: rotateX(3deg); height: 12.792px; } 27.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 20px; } 32.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 20px; } 37.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 20px; } 42.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 20px; } 47.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 21px; } 52.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 21px; } 57.5% { -webkit-transform: rotateX(-19deg); transform: rotateX(-19deg); height: 21.932px; } 62.5% { -webkit-transform: rotateX(-19deg); transform: rotateX(-19deg); height: 21.932px; } 67.5% { -webkit-transform: rotateX(18deg); transform: rotateX(18deg); height: 13.981px; } 72.5% { -webkit-transform: rotateX(18deg); transform: rotateX(18deg); height: 13.981px; } 77.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 13.738px; } 82.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 13.738px; } } @keyframes slice-7 { 2.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 20px; } 7.5% { -webkit-transform: rotateX(-14deg); transform: rotateX(-14deg); height: 24.268px; } 12.5% { -webkit-transform: rotateX(-14deg); transform: rotateX(-14deg); height: 24.268px; } 17.5% { -webkit-transform: rotateX(3deg); transform: rotateX(3deg); height: 12.792px; } 22.5% { -webkit-transform: rotateX(3deg); transform: rotateX(3deg); height: 12.792px; } 27.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 20px; } 32.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 20px; } 37.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 20px; } 42.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 20px; } 47.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 21px; } 52.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 21px; } 57.5% { -webkit-transform: rotateX(-19deg); transform: rotateX(-19deg); height: 21.932px; } 62.5% { -webkit-transform: rotateX(-19deg); transform: rotateX(-19deg); height: 21.932px; } 67.5% { -webkit-transform: rotateX(18deg); transform: rotateX(18deg); height: 13.981px; } 72.5% { -webkit-transform: rotateX(18deg); transform: rotateX(18deg); height: 13.981px; } 77.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 13.738px; } 82.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 13.738px; } } @-webkit-keyframes slice-8 { 2.5% { -webkit-transform: rotateX(31deg); transform: rotateX(31deg); height: 23.324px; } 7.5% { -webkit-transform: rotateX(-42deg); transform: rotateX(-42deg); height: 27px; } 12.5% { -webkit-transform: rotateX(-42deg); transform: rotateX(-42deg); height: 27px; } 17.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 11.829px; } 22.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 11.829px; } 27.5% { -webkit-transform: rotateX(31deg); transform: rotateX(31deg); height: 23.324px; } 32.5% { -webkit-transform: rotateX(31deg); transform: rotateX(31deg); height: 23.324px; } 37.5% { -webkit-transform: rotateX(-90deg); transform: rotateX(-90deg); height: 20px; } 42.5% { -webkit-transform: rotateX(-90deg); transform: rotateX(-90deg); height: 20px; } 47.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 24px; } 52.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 24px; } 57.5% { -webkit-transform: rotateX(-6deg); transform: rotateX(-6deg); height: 35.735px; } 62.5% { -webkit-transform: rotateX(-6deg); transform: rotateX(-6deg); height: 35.735px; } 67.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 17.972px; } 72.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 17.972px; } 77.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 12.794px; } 82.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 12.794px; } } @keyframes slice-8 { 2.5% { -webkit-transform: rotateX(31deg); transform: rotateX(31deg); height: 23.324px; } 7.5% { -webkit-transform: rotateX(-42deg); transform: rotateX(-42deg); height: 27px; } 12.5% { -webkit-transform: rotateX(-42deg); transform: rotateX(-42deg); height: 27px; } 17.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 11.829px; } 22.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 11.829px; } 27.5% { -webkit-transform: rotateX(31deg); transform: rotateX(31deg); height: 23.324px; } 32.5% { -webkit-transform: rotateX(31deg); transform: rotateX(31deg); height: 23.324px; } 37.5% { -webkit-transform: rotateX(-90deg); transform: rotateX(-90deg); height: 20px; } 42.5% { -webkit-transform: rotateX(-90deg); transform: rotateX(-90deg); height: 20px; } 47.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 24px; } 52.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 24px; } 57.5% { -webkit-transform: rotateX(-6deg); transform: rotateX(-6deg); height: 35.735px; } 62.5% { -webkit-transform: rotateX(-6deg); transform: rotateX(-6deg); height: 35.735px; } 67.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 17.972px; } 72.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 17.972px; } 77.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 12.794px; } 82.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 12.794px; } } @-webkit-keyframes slice-9 { 2.5% { -webkit-transform: rotateX(23deg); transform: rotateX(23deg); height: 33.601px; } 7.5% { -webkit-transform: rotateX(-40deg); transform: rotateX(-40deg); height: 32.562px; } 12.5% { -webkit-transform: rotateX(-40deg); transform: rotateX(-40deg); height: 32.562px; } 17.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 22.265px; } 22.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 22.265px; } 27.5% { -webkit-transform: rotateX(23deg); transform: rotateX(23deg); height: 33.601px; } 32.5% { -webkit-transform: rotateX(23deg); transform: rotateX(23deg); height: 33.601px; } 37.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 26px; } 42.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 26px; } 47.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 28px; } 52.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 28px; } 57.5% { -webkit-transform: rotateX(147deg); transform: rotateX(147deg); height: 17.54px; } 62.5% { -webkit-transform: rotateX(147deg); transform: rotateX(147deg); height: 17.54px; } 67.5% { -webkit-transform: rotateX(21deg); transform: rotateX(21deg); height: 27.394px; } 72.5% { -webkit-transform: rotateX(21deg); transform: rotateX(21deg); height: 27.394px; } 77.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 12.874px; } 82.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 12.874px; } } @keyframes slice-9 { 2.5% { -webkit-transform: rotateX(23deg); transform: rotateX(23deg); height: 33.601px; } 7.5% { -webkit-transform: rotateX(-40deg); transform: rotateX(-40deg); height: 32.562px; } 12.5% { -webkit-transform: rotateX(-40deg); transform: rotateX(-40deg); height: 32.562px; } 17.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 22.265px; } 22.5% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); height: 22.265px; } 27.5% { -webkit-transform: rotateX(23deg); transform: rotateX(23deg); height: 33.601px; } 32.5% { -webkit-transform: rotateX(23deg); .........完整代码请登录后点击上方下载按钮下载查看
网友评论0