css实现文字拆解拆分动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：css实现文字拆解拆分动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
<style>
    @import url("https://fonts.googleapis.com/css2?family=Noto+Sans:wght@700&display=swap");
/**
* get random number.
* @param {number} min - min number.
* @param {number} max - max number.
*/
/*
* variable
*/
html,
body {
  height: 100%;
  width: 100%;
}
body {
  color: #423927;
  font-family: 'Noto Sans', sans-serif;
  background: #d4cbaf;
  position: relative;
  overflow: hidden;
  font-size: 67.5%;
  text-align: center;
}
.background {
  position: absolute;
  width: 100%;
  height: 100%;
}
.background-top {
  top: 0;
  left: 0;
  height: 0;
  -webkit-animation: top-animation 5s ease-in-out 1s infinite normal none;
          animation: top-animation 5s ease-in-out 1s infinite normal none;
  background-color: #f38fa6;
}
.background-right {
  top: 0;
  right: 0;
  width: 0;
  -webkit-animation: right-animation 5s ease-in-out 2.25s infinite normal none;
          animation: right-animation 5s ease-in-out 2.25s infinite normal none;
  background-color: #fbdd97;
}
.background-bottom {
  bottom: 0;
  left: 0;
  height: 0;
  -webkit-animation: bottom-animation 5s ease-in-out 3.5s infinite normal none;
          animation: bottom-animation 5s ease-in-out 3.5s infinite normal none;
  background-color: #55e2bd;
}
.background-left {
  top: 0;
  left: 0;
  width: 0;
  -webkit-animation: left-animation 5s ease-in-out 4.75s infinite normal none;
          animation: left-animation 5s ease-in-out 4.75s infinite normal none;
  background-color: #7bbcd1;
}
.criterion {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 0;
  width: 0;
  transform: translate(-20px, -20px);
}
.text {
  position: absolute;
  font-size: 40px;
  height: 40px;
  width: 40px;
  opacity: 0;
}
.text-0 {
  left: -120px;
  -webkit-animation: text-animation 1s ease-in-out 0s 1 normal forwards, text-animation-2-0 6.25s ease-in-out 1s infinite normal none;
          animation: text-animation 1s ease-in-out 0s 1 normal forwards, text-animation-2-0 6.25s ease-in-out 1s infinite normal none;
}
.text-1 {
  left: -80px;
  -webkit-animation: text-animation 1s ease-in-out 0s 1 normal forwards, text-animation-2-1 6.25s ease-in-out 1s infinite normal none;
          animation: text-animation 1s ease-in-out 0s 1 normal forwards, text-animation-2-1 6.25s ease-in-out 1s infinite normal none;
}
.text-2 {
  left: -40px;
  -webkit-animation: text-animation 1s ease-in-out 0s 1 normal forwards, text-animation-2-2 6.25s ease-in-out 1s infinite normal none;
          animation: text-animation 1s ease-in-out 0s 1 normal forwards, text-animation-2-2 6.25s ease-in-out 1s infinite normal none;
}
.text-3 {
  left: 0px;
  -webkit-animation: text-animation 1s ease-in-out 0s 1 normal forwards, text-animation-2-3 6.25s ease-in-out 1s infinite normal none;
          animation: text-animation 1s ease-in-out 0s 1 normal forwards, text-animation-2-3 6.25s ease-in-out 1s infinite normal none;
}
.text-4 {
  left: 40px;
  -webkit-animation: text-animation 1s ease-in-out 0s 1 normal forwards, text-animation-2-4 6.25s ease-in-out 1s infinite normal none;
          animation: text-animation 1s ease-in-out 0s 1 normal forwards, text-animation-2-4 6.25s ease-in-out 1s infinite normal none;
}
.text-5 {
  left: 80px;
  -webkit-animation: text-animation 1s ease-in-out 0s 1 normal forwards, text-animation-2-5 6.25s ease-in-out 1s infinite normal none;
          animation: text-animation 1s ease-in-out 0s 1 normal forwards, text-animation-2-5 6.25s ease-in-out 1s infinite normal none;
}
.text-6 {
  left: 120px;
  -webkit-animation: text-animation 1s ease-in-out 0s 1 normal forwards, text-animation-2-6 6.25s ease-in-out 1s infinite normal none;
          animation: text-animation 1s ease-in-out 0s 1 normal forwards, text-animation-2-6 6.25s ease-in-out 1s infinite normal none;
}
.text-7 {
  left: 160px;
  -webkit-animation: text-animation 1s ease-in-out 0s 1 normal forwards, text-animation-2-7 6.25s ease-in-out 1s infinite normal none;
          animation: text-animation 1s ease-in-out 0s 1 normal forwards, text-animation-2-7 6.25s ease-in-out 1s infinite normal none;
}
@-webkit-keyframes text-animation-2-0 {
  0% {
    left: -86.0364654px;
    top: 149.97715425px;
    transform: rotate(320deg) scale(3, 3);
  }
  10% {
    left: -147.72116295px;
    top: -118.2016131px;
    transform: rotate(29deg) scale(3, 3);
  }
  20% {
    left: -94.39805865000001px;
    top: 141.8277864px;
    transform: rotate(279deg) scale(3, 3);
  }
  30% {
    left: -83.87893545px;
    top: 116.57189415px;
    transform: rotate(216deg) scale(3, 3);
  }
  40% {
    left: 129.9038106px;
    top: -7.850393400000001px;
    transform: rotate(9deg) scale(3, 3);
  }
  50% {
    left: -129.9038106px;
    top: 131.19295605px;
    transform: rotate(255deg) scale(3, 3);
  }
  60% {
    left: 65.75567205px;
    top: 146.72214015px;
    transform: rotate(360deg) scale(3, 3);
  }
  70% {
    left: -23.465169749999998px;
    top: 146.15550975px;
    transform: rotate(130deg) scale(3, 3);
  }
  80% {
    left: 148.15325115000002px;
    top: -131.19295605px;
    transform: rotate(259deg) scale(3, 3);
  }
  90% {
    left: -72.721443px;
    top: -18.28040145px;
    transform: rotate(15deg) scale(3, 3);
  }
  100% {
    left: -46.3525491px;
    top: 94.39805865000001px;
    transform: rotate(75deg) scale(3, 3);
  }
  0% {
    left: -120px;
    top: 0;
    transform: rotate(0deg) scale(1, 1);
  }
  90% {
    left: -120px;
    top: 0;
    transform: rotate(0deg) scale(1, 1);
  }
  100% {
    left: -120px;
    top: 0;
    transform: rotate(0deg) scale(1, 1);
  }
}
@keyframes text-animation-2-0 {
  0% {
    left: -86.0364654px;
    top: 149.97715425px;
    transform: rotate(320deg) scale(3, 3);
  }
  10% {
    left: -147.72116295px;
    top: -118.2016131px;
    transform: rotate(29deg) scale(3, 3);
  }
  20% {
    left: -94.39805865000001px;
    top: 141.8277864px;
    transform: rotate(279deg) scale(3, 3);
  }
  30% {
    left: -83.87893545px;
    top: 116.57189415px;
    transform: rotate(216deg) scale(3, 3);
  }
  40% {
    left: 129.9038106px;
    top: -7.850393400000001px;
    transform: rotate(9deg) scale(3, 3);
  }
  50% {
    left: -129.9038106px;
    top: 131.19295605px;
    transform: rotate(255deg) scale(3, 3);
  }
  60% {
    left: 65.75567205px;
    top: 146.72214015px;
    transform: rotate(360deg) scale(3, 3);
  }
  70% {
    left: -23.465169749999998px;
    top: 146.15550975px;
    transform: rotate(130deg) scale(3, 3);
  }
  80% {
    left: 148.15325115000002px;
    top: -131.19295605px;
    transform: rotate(259deg) scale(3, 3);
  }
  90% {
    left: -72.721443px;
    top: -18.28040145px;
    transform: rotate(15deg) scale(3, 3);
  }
  100% {
    left: -46.3525491px;
    top: 94.39805865000001px;
    transform: rotate(75deg) scale(3, 3);
  }
  0% {
    left: -120px;
    top: 0;
    transform: rotate(0deg) scale(1, 1);
  }
  90% {
    left: -120px;
    top: 0;
    transform: rotate(0deg) scale(1, 1);
  }
  100% {
    left: -120px;
    top: 0;
    transform: rotate(0deg) scale(1, 1);
  }
}
@-webkit-keyframes text-animation-2-1 {
  0% {
    left: -15.67926945px;
    top: -23.465169749999998px;
    transform: rotate(97deg) scale(3, 3);
  }
  10% {
    left: 63.3927393px;
    top: 31.18675365px;
    transform: rotate(51deg) scale(3, 3);
  }
  20% {
    left: -124.35563595px;
    top: 144.8888739px;
    transform: rotate(103deg) scale(3, 3);
  }
  30% {
    left: 118.2016131px;
    top: -36.2882844px;
    transform: rotate(51deg) scale(3, 3);
  }
  40% {
    left: -146.72214015px;
    top: 70.42073445px;
    transform: rotate(308deg) scale(3, 3);
  }
  50% {
    left: -86.0364654px;
    top: -90.27225345px;
    transform: rotate(195deg) scale(3, 3);
  }
  60% {
    left: -134.8191069px;
    top: 132.44213895000001px;
    transform: rotate(198deg) scale(3, 3);
  }
  70% {
    left: -125.80058519999999px;
    top: -70.42073445px;
    transform: rotate(15deg) scale(3, 3);
  }
  80% {
    left: 0px;
    top: 106.06601715000001px;
    transform: rotate(345deg) scale(3, 3);
  }
  90% {
    left: 98.40885435px;
    top: -41.3456034px;
    transform: rotate(136deg) scale(3, 3);
  }
  100% {
    left: -146.72214015px;
    top: -77.25571125px;
    transform: rotate(346deg) scale(3, 3);
  }
  0% {
    left: -80px;
    top: 0;
    transform: rotate(0deg) scale(1, 1);
  }
  90% {
    left: -80px;
    top: 0;
    transform: rotate(0deg) scale(1, 1);
  }
  100% {
    left: -80px;
    top: 0;
    transform: rotate(0deg) scale(1, 1);
  }
}
@keyframes text-animation-2-1 {
  0% {
    left: -15.67926945px;
    top: -23.465169749999998px;
    transform: rotate(97deg) scale(3, 3);
  }
  10% {
    left: 63.3927393px;
    top: 31.18675365px;
    transform: rotate(51deg) scale(3, 3);
  }
  20% {
    left: -124.35563595px;
    top: 144.8888739px;
    transform: rotate(103deg) scale(3, 3);
  }
  30% {
    left: 118.2016131px;
    top: -36.2882844px;
    transform: rotate(51deg) scale(3, 3);
  }
  40% {
    left: -146.72214015px;
    top: 70.42073445px;
    transform: rotate(308deg) scale(3, 3);
  }
  50% {
    left: -86.0364654px;
    top: -90.27225345px;
    transform: rotate(195deg) scale(3, 3);
  }
  60% {
    left: -134.8191069px;
    top: 132.44213895000001px;
    transform: rotate(198deg) scale(3, 3);
  }
  70% {
    left: -125.80058519999999px;
    top: -70.42073445px;
    transform: rotate(15deg) scale(3, 3);
  }
  80% {
    left: 0px;
    top: 106.06601715000001px;
    transform: rotate(345deg) scale(3, 3);
  }
  90% {
    left: 98.40885435px;
    top: -41.3456034px;
    transform: rotate(136deg) scale(3, 3);
  }
  100% {
    left: -146.72214015px;
    top: -77.25571125px;
    transform: rotate(346deg) scale(3, 3);
  }
  0% {
    left: -80px;
    top: 0;
    transform: rotate(0deg) scale(1, 1);
  }
  90% {
    left: -80px;
    top: 0;
    transform: rotate(0deg) scale(1, 1);
  }
  100% {
    left: -80px;
    top: 0;
    transform: rotate(0deg) scale(1, 1);
  }
}
@-webkit-keyframes text-animation-2-2 {
  0% {
    left: -53.7551925px;
    top: 149.17828425px;
    transform: rotate(18deg) scale(3, 3);
  }
  10% {
    left: 96.41814149999999px;
    top: -131.19295605px;
    transform: rotate(324deg) scale(3, 3);
  }
  20% {
    left: -118.2016131px;
    top: -140.0370639px;
    transform: rotate(172deg) scale(3, 3);
  }
  30% {
    left: 143.4457134px;
    top: -88.1677878px;
    transform: rotate(84deg) scale(3, 3);
  }
  40% {
    left: -138.07572795px;
    top: -111.47172375px;
    transform: rotate(269deg) scale(3, 3);
  }
  50% {
    left: -13.073361449999998px;
    top: 119.7953265px;
    transform: rotate(30deg) scale(3, 3);
  }
  60% {
    left: -38.82285675000001px;
    top: 140.95389315px;
    transform: rotate(274deg) scale(3, 3);
  }
  70% {
    left: -147.24407745px;
    top: -140.0370639px;
    transform: rotate(197deg) scale(3, 3);
  }
  80% {
    left: -36.2882844px;
    top: -139.07757825px;
    transform: rotate(137deg) scale(3, 3);
  }
  90% {
    left: -7.850393400000001px;
    top: -129.9038106px;
    transform: rotate(62deg) scale(3, 3);
  }
  100% {
    left: 10.4634711px;
    top: 31.18675365px;
    transform: rotate(317deg) scale(3, 3);
  }
  0% {
    left: -40px;
    top: 0;
    transform: rotate(0deg) scale(1, 1);
  }
  90% {
    left: -40px;
    top: 0;
    transform: rotate(0deg) scale(1, 1);
  }
  100% {
    left: -40px;
    top: 0;
    transform: rotate(0deg) scale(1, 1);
  }
}
@keyframes text-animation-2-2 {
  0% {
    left: -53.7551925px;
    top: 149.17828425px;
    transform: rotate(18deg) scale(3, 3);
  }
  10% {
    left: 96.41814149999999px;
    top: -131.19295605px;
    transform: rotate(324deg) scale(3, 3);
  }
  20% {
    left: -118.2016131px;
    top: -140.0370639px;
    transform: rotate(172deg) scale(3, 3);
  }
  30% {
    left: 143.4457134px;
    top: -88.1677878px;
    transform: rotate(84deg) scale(3, 3);
  }
  40% {
    left: -138.07572795px;
    top: -111.47172375px;
    transform: rotate(269deg) scale(3, 3);
  }
  50% {
    left: -13.073361449999998px;
    top: 119.7953265px;
    transform: rotate(30deg) scale(3, 3);
  }
  60% {
    left: -38.82285675000001px;
    top: 140.95389315px;
    transform: rotate(274deg) scale(3, 3);
  }
  70% {
    left: -147.24407745px;
    top: -140.0370639px;
    transform: rotate(197deg) scale(3, 3);
  }
  80% {
    left: -36.2882844px;
    top: -139.07757825px;
    transform: rotate(137deg) scale(3, 3);
  }
  90% {
    left: -7.850393400000001px;
    top: -129.9038106px;
    transform: rotate(62deg) scale(3, 3);
  }
  100% {
    left: 10.4634711px;
    top: 31.18675365px;
    transform: rotate(317deg) scale(3, 3);
  }
  0% {
    left: -40px;
    top: 0;
    transform: rotate(0deg) scale(1, 1);
  }
  90% {
    left: -40px;
    top: 0;
    transform: rotate(0deg) scale(1, 1);
  }
  100% {
    left: -40px;
    top: 0;
    transform: rotate(0deg) scale(1, 1);
  }
}
@-webkit-keyframes text-animation-2-3 {
  0% {
    left: -51.30302145px;
    top: 142.65847739999998px;
    transform: rotate(69deg) scale(3, 3);
  }
  10% {
    left: -119.7953265px;
    top: 75px;
    transform: rotate(210deg) scale(3, 3);
  }
  20% {
    left: 38.82285675000001px;
    top: -33.7426581px;
    transform: rotate(99deg) scale(3, 3);
  }
  30% {
    left: 56.19098895px;
    top: -140.95389315px;
    transform: rotate(242deg) scale(3, 3);
  }
  40% {
    left: 77.25571125px;
    top: 13.073361449999998px;
    transform: rotate(25deg) scale(3, 3);
  }
  50% {
    left: -65.75567205px;
    top: 146.15550975px;
    transform: rotate(9deg) scale(3, 3);
  }
  60% {
    left: -134.8191069px;
    top: -2.6178609px;
    transform: rotate(21deg) scale(3, 3);
  }
  70% {
    left: 133.6509786px;
    top: 149.97715425px;
    transform: rotate(55deg) scale(3, 3);
  }
  80% {
    left: -41.3456034px;
    top: -149.17828425px;
    transform: rotate(277deg) scale(3, 3);
  }
  90% {
    left: -150px;
    top: 41.3456034px;
    transform: rotate(59deg) scale(3, 3);
  }
  100% {
    left: -127.2072144px;
    top: -147.72116295px;
    transform: rotate(132deg) scale(3, 3);
  }
  0% {
    left: 0px;
    top: 0;
    transform: rotate(0deg) scale(1, 1);
  }
  90% {
    left: 0px;
    top: 0;
    transform: rotate(0deg) scale(1, 1);
  }
  100% {
    left: 0px;
    top: 0;
    transform: rotate(0deg) scale(1, 1);
  }
}
@keyframes text-animation-2-3 {
  0% {
    left: -51.30302145px;
    top: 142.65847739999998px;
    transform: rotate(69deg) scale(3, 3);
  }
  10% {
    left: -119.7953265px;
    top: 75px;
    transform: rotate(210deg) scale(3, 3);
  }
  20% {
    left: 38.82285675000001px;
    top: -33.7426581px;
    transform: rotate(99deg) scale(3, 3);
  }
  30% {
    left: 56.19098895px;
    top: -140.95389315px;
    transform: rotate(242deg) scale(3, 3);
  }
  40% {
    left: 77.25571125px;
    top: 13.073361449999998px;
    transform: rotate(25deg) scale(3, 3);
  }
  50% {
    left: -65.75567205px;
    top: 146.15550975px;
    transform: rotate(9deg) scale(3, 3);
  }
  60% {
    left: -134.8191069px;
    top: -2.6178609px;
    transform: rotate(21deg) scale(3, 3);
  }
  70% {
    left: 133.6509786px;
    top: 149.97715425px;
    transform: rotate(55deg) scale(3, 3);
  }
  80% {
    left: -41.3456034px;
    top: -149.17828425px;
    transform: rotate(277deg) scale(3, 3);
  }
  90% {
    left: -150px;
    top: 41.3456034px;
    transform: rotate(59deg) scale(3, 3);
  }
  100% {
    left: -127.2072144px;
    top: -147.72116295px;
    transform: rotate(132deg) scale(3, 3);
  }
  0% {
    left: 0px;
    top: 0;
    transform: rotate(0deg) scale(1, 1);
  }
  90% {
    left: 0px;
    top: 0;
    transform: rotate(0deg) scale(1, 1);
  }
  100% {
    left: 0px;
    top: 0;
    transform: rotate(0deg) scale(1, 1);
  }
}
@-webkit-keyframes text-animation-2-4 {
  0% {
    left: -10.4634711px;
    top: 48.8352231px;
    transform: rotate(90deg) scale(3, 3);
  }
  10% {
    left: -68.098575px;
    top: -43.85575575px;
    transform: rotate(349deg) scale(3, 3);
  }
  20% {
    left: -61.01049645px;
    top: 33.7426581px;
    transform: rotate(295deg) scale(3, 3);
  }
  30% {
    left: -107.90097px;
    top: -133.6509786px;
    transform: rotate(99deg) scale(3, 3);
  }
  40% {
    left: 149.90862405000001px;
    top: -109.7030553px;
    transform: rotate(305deg) scale(3, 3);
  }
  50% {
    left: -28.62134925px;
    top: 61.........完整代码请登录后点击上方下载按钮下载查看