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: -65.75567205px;
    top: -139.07757825px;
    transform: rotate(67deg) scale(3, 3);
  }
  10% {
    left: 111.47172375px;
    top: 149.97715425px;
    transform: rotate(26deg) scale(3, 3);
  }
  20% {
    left: -90.27225345px;
    top: 147.24407745px;
    transform: rotate(222deg) scale(3, 3);
  }
  30% {
    left: 109.7030553px;
    top: -77.25571125px;
    transform: rotate(208deg) scale(3, 3);
  }
  40% {
    left: -124.35563595px;
    top: 149.17828425px;
    transform: rotate(307deg) scale(3, 3);
  }
  50% {
    left: -144.8888739px;
    top: 102.29975400000001px;
    transform: rotate(80deg) scale(3, 3);
  }
  60% {
    left: 10.4634711px;
    top: 127.2072144px;
    transform: rotate(131deg) scale(3, 3);
  }
  70% {
    left: -10.4634711px;
    top: -111.47172375px;
    transform: rotate(209deg) scale(3, 3);
  }
  80% {
    left: 114.90666644999999px;
    top: 18.28040145px;
    transform: rotate(105deg) scale(3, 3);
  }
  90% {
    left: -149.17828425px;
    top: 140.0370639px;
    transform: rotate(335deg) scale(3, 3);
  }
  100% {
    left: 132.44213895000001px;
    top: 149.4292047px;
    transform: rotate(200deg) 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: -65.75567205px;
    top: -139.07757825px;
    transform: rotate(67deg) scale(3, 3);
  }
  10% {
    left: 111.47172375px;
    top: 149.97715425px;
    transform: rotate(26deg) scale(3, 3);
  }
  20% {
    left: -90.27225345px;
    top: 147.24407745px;
    transform: rotate(222deg) scale(3, 3);
  }
  30% {
    left: 109.7030553px;
    top: -77.25571125px;
    transform: rotate(208deg) scale(3, 3);
  }
  40% {
    left: -124.35563595px;
    top: 149.17828425px;
    transform: rotate(307deg) scale(3, 3);
  }
  50% {
    left: -144.8888739px;
    top: 102.29975400000001px;
    transform: rotate(80deg) scale(3, 3);
  }
  60% {
    left: 10.4634711px;
    top: 127.2072144px;
    transform: rotate(131deg) scale(3, 3);
  }
  70% {
    left: -10.4634711px;
    top: -111.47172375px;
    transform: rotate(209deg) scale(3, 3);
  }
  80% {
    left: 114.90666644999999px;
    top: 18.28040145px;
    transform: rotate(105deg) scale(3, 3);
  }
  90% {
    left: -149.17828425px;
    top: 140.0370639px;
    transform: rotate(335deg) scale(3, 3);
  }
  100% {
    left: 132.44213895000001px;
    top: 149.4292047px;
    transform: rotate(200deg) 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: 143.4457134px;
    top: -140.95389315px;
    transform: rotate(203deg) scale(3, 3);
  }
  10% {
    left: 149.79443025px;
    top: -26.0472267px;
    transform: rotate(348deg) scale(3, 3);
  }
  20% {
    left: 131.19295605px;
    top: 96.41814149999999px;
    transform: rotate(18deg) scale(3, 3);
  }
  30% {
    left: 26.0472267px;
    top: 65.75567205px;
    transform: rotate(109deg) scale(3, 3);
  }
  40% {
    left: -94.39805865000001px;
    top: 13.073361449999998px;
    transform: rotate(268deg) scale(3, 3);
  }
  50% {
    left: -142.65847739999998px;
    top: 41.3456034px;
    transform: rotate(215deg) scale(3, 3);
  }
  60% {
    left: 36.2882844px;
    top: -43.85575575px;
    transform: rotate(39deg) scale(3, 3);
  }
  70% {
    left: 118.2016131px;
    top: 5.234924550000001px;
    transform: rotate(136deg) scale(3, 3);
  }
  80% {
    left: 138.07572795px;
    top: -48.8352231px;
    transform: rotate(145deg) scale(3, 3);
  }
  90% {
    left: 56.19098895px;
    top: -134.8191069px;
    transform: rotate(308deg) scale(3, 3);
  }
  100% {
    left: -147.24407745px;
    top: -135.94616805px;
    transform: rotate(247deg) 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: 143.4457134px;
    top: -140.95389315px;
    transform: rotate(203deg) scale(3, 3);
  }
  10% {
    left: 149.79443025px;
    top: -26.0472267px;
    transform: rotate(348deg) scale(3, 3);
  }
  20% {
    left: 131.19295605px;
    top: 96.41814149999999px;
    transform: rotate(18deg) scale(3, 3);
  }
  30% {
    left: 26.0472267px;
    top: 65.75567205px;
    transform: rotate(109deg) scale(3, 3);
  }
  40% {
    left: -94.39805865000001px;
    top: 13.073361449999998px;
    transform: rotate(268deg) scale(3, 3);
  }
  50% {
    left: -142.65847739999998px;
    top: 41.3456034px;
    transform: rotate(215deg) scale(3, 3);
  }
  60% {
    left: 36.2882844px;
    top: -43.85575575px;
    transform: rotate(39deg) scale(3, 3);
  }
  70% {
    left: 118.2016131px;
    top: 5.234924550000001px;
    transform: rotate(136deg) scale(3, 3);
  }
  80% {
    left: 138.07572795px;
    top: -48.8352231px;
    transform: rotate(145deg) scale(3, 3);
  }
  90% {
    left: 56.19098895px;
    top: -134.8191069px;
    transform: rotate(308deg) scale(3, 3);
  }
  100% {
    left: -147.24407745px;
    top: -135.94616805px;
    transform: rotate(247deg) 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: 72.721443px;
    top: 0px;
    transform: rotate(14deg) scale(3, 3);
  }
  10% {
    left: -138.07572795px;
    top: -138.07572795px;
    transform: rotate(271deg) scale(3, 3);
  }
  20% {
    left: 149.90862405000001px;
    top: -77.25571125px;
    transform: rotate(205deg) scale(3, 3);
  }
  30% {
    left: 149.90862405000001px;
    top: 92.34922125px;
    transform: rotate(130deg) scale(3, 3);
  }
  40% {
    left: 146.72214015px;
    top: -23.465169749999998px;
    transform: rotate(8deg) scale(3, 3);
  }
  50% {
    left: 33.7426581px;
    top: 81.69585525px;
    transform: rotate(273deg) scale(3, 3);
  }
  60% {
    left: 148.88192279999998px;
    top: -18.28040145px;
    transform: rotate(233deg) scale(3, 3);
  }
  70% {
    left: -48.8352231px;
    top: -113.206437px;
    transform: rotate(360deg) scale(3, 3);
  }
  80% {
    left: 148.88192279999998px;
    top: -15.67926945px;
    transform: rotate(348deg) scale(3, 3);
  }
  90% {
    left: -18.28040145px;
    top: -133.6509786px;
    transform: rotate(160deg) scale(3, 3);
  }
  100% {
    left: -114.90666644999999px;
    top: 20.87596515px;
    transform: rotate(161deg) 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: 72.721443px;
    top: 0px;
    transform: rotate(14deg) scale(3, 3);
  }
  10% {
    left: -138.07572795px;
    top: -138.07572795px;
    transform: rotate(271deg) scale(3, 3);
  }
  20% {
    left: 149.90862405000001px;
    top: -77.25571125px;
    transform: rotate(205deg) scale(3, 3);
  }
  30% {
    left: 149.90862405000001px;
    top: 92.34922125px;
    transform: rotate(130deg) scale(3, 3);
  }
  40% {
    left: 146.72214015px;
    top: -23.465169749999998px;
    transform: rotate(8deg) scale(3, 3);
  }
  50% {
    left: 33.7426581px;
    top: 81.69585525px;
    transform: rotate(273deg) scale(3, 3);
  }
  60% {
    left: 148.88192279999998px;
    top: -18.28040145px;
    transform: rotate(233deg) scale(3, 3);
  }
  70% {
    left: -48.8352231px;
    top: -113.206437px;
    transform: rotate(360deg) scale(3, 3);
  }
  80% {
    left: 148.88192279999998px;
    top: -15.67926945px;
    transform: rotate(348deg) scale(3, 3);
  }
  90% {
    left: -18.28040145px;
    top: -133.6509786px;
    transform: rotate(160deg) scale(3, 3);
  }
  100% {
    left: -114.90666644999999px;
    top: 20.87596515px;
    transform: rotate(161deg) 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: 114.90666644999999px;
    top: 58.6096692px;
    transform: rotate(248deg) scale(3, 3);
  }
  10% {
    left: 90.27225345px;
    top: 46.3525491px;
    transform: rotate(199deg) scale(3, 3);
  }
  20% {
    left: -132.44213895000001px;
    top: -113.206437px;
    transform: rotate(345deg) scale(3, 3);
  }
  30% {
    left: 149.90862405000001px;
    top: 140.0370639px;
    transform: rotate(337deg) scale(3, 3);
  }
  40% {
    left: -61.01049645px;
    top: -36.2882844px;
    transform: rotate(215deg) scale(3, 3);
  }
  50% {
    left: 121.3525491px;
    top: -140.95389315px;
    transform: rotate(319deg) scale(3, 3);
  }
  60% {
    left: 96.41814149999999px;
    top: -77.25571125px;
    transform: rotate(138deg) scale(3, 3);
  }
  70% {
    left: -72.721443px;
    top: -56.19098895px;
    transform: rotate(145deg) scale(3, 3);
  }
  80% {
    left: -46.3525491px;
    top: 149.90862405000001px;
    transform: rotate(334deg) scale(3, 3);
  }
  90% {
    left: 33.7426581px;
    top: -143.4457134px;
    transform: rotate(43deg) scale(3, 3);
  }
  100% {
    left: 132.44213895000001px;
    top: -46.3525491px;
    transform: rotate(170deg) 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: 114.90666644999999px;
    top: 58.6096692px;
    transform: rotate(248deg) scale(3, 3);
  }
  10% {
    left: 90.27225345px;
    top: 46.3525491px;
    transform: rotate(199deg) scale(3, 3);
  }
  20% {
    left: -132.44213895000001px;
    top: -113.206437px;
    transform: rotate(345deg) scale(3, 3);
  }
  30% {
    left: 149.90862405000001px;
    top: 140.0370639px;
    transform: rotate(337deg) scale(3, 3);
  }
  40% {
    left: -61.01049645px;
    top: -36.2882844px;
    transform: rotate(215deg) scale(3, 3);
  }
  50% {
    left: 121.3525491px;
    top: -140.95389315px;
    transform: rotate(319deg) scale(3, 3);
  }
  60% {
    left: 96.41814149999999px;
    top: -77.25571125px;
    transform: rotate(138deg) scale(3, 3);
  }
  70% {
    left: -72.721443px;
    top: -56.19098895px;
    transform: rotate(145deg) scale(3, 3);
  }
  80% {
    left: -46.3525491px;
    top: 149.90862405000001px;
    transform: rotate(334deg) scale(3, 3);
  }
  90% {
    left: 33.7426581px;
    top: -143.4457134px;
    transform: rotate(43deg) scale(3, 3);
  }
  100% {
    left: 132.44213895000001px;
    top: -46.3525491px;
    transform: rotate(170deg) 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: -142.65847739999998px;
    top: -127.2072144px;
    transform: rotate(284deg) scale(3, 3);
  }
  10% {
    left: 149.90862405000001px;
    top: 111.47172375px;
    transform: rotate(26deg) scale(3, 3);
  }
  20% {
    left: -145.5443589px;
    top: 147.72116295px;
    transform: rotate(228deg) scale(3, 3);
  }
  30% {
    left: -144.8888739px;
    top: 2.6178609px;
    transform: rotate(354deg) scale(3, 3);
  }
  40% {
    left: -116.57189415px;
    top: 56.19098895px;
    transform: rotate(270de.........完整代码请登录后点击上方下载按钮下载查看