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

css实现文字拆分动画效果代码

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