纯css实现多彩纸形数字变动动画效果-html代码-BFW代码库

代码语言：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(-26de.........完整代码请登录后点击上方下载按钮下载查看