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;.........完整代码请登录后点击上方下载按钮下载查看