SplitText实现文字文本拆分飞入飞出动画效果代码-html代码-BFW代码库

SplitText实现文字文本拆分飞入飞出动画效果代码

代码语言：html

所属分类：动画

代码描述：SplitText实现文字文本拆分飞入飞出动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css">
  
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Nabla:wght@400&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Bahianita&family=Scope+One&display=swap");
body {
  height: 100vh;
  overflow: hidden;
  --pink: #f9a4c4;
  --blue: #73b4f2;
  --black: #050e13;
}

#text {
  display: none;
}

section {
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--blue);
}

audio#musical {
  z-index: 12001;
  position: absolute;
  right: 1vw;
  bottom: 1vw;
  display: flexbox;
}

.anim {
  animation: revealing 2s ease-in 1;
}

.logotype {
  font-family: "Nabla", cursive;
  font-size: 25vh;
  text-transform: uppercase;
  color: yellow;
  position: absolute;
  width: 100vw;
  height: 100vh;
  bottom: 10vh;
  top: 20vh;
  text-align: center;
  z-index: 6000;
  opacity: 1;
  text-shadow: 0vh 1vh 1vh rgba(0, 0, 0, 0.02), 0vh 1.25vh 1vh rgba(0, 0, 0, 0.02), 0vh 1.5vh 1vw rgba(0, 0, 0, 0.02), 0 1.75vh 1vh rgba(0, 0, 0, 0.02);
}

@keyframes revealing {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.text-reveal {
  top: 50vh;
  left: 12.5vw;
  position: absolute;
  width: 75vw;
  text-align: left;
  font-family: "Scope One";
  font-size: 1vw;
  color: #fff;
  line-height: 1.2;
  height: 100vh;
  overflow: hidden;
  padding-top: 5vh;
  text-shadow: 0px -0.1vh 0.2vh rgba(255, 255, 255, 0.66);
}

.text-reveal h1 div div {
  background: linear-gradient(to bottom, #ffffff 0%, #d3d3d3 85%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #fff;
}

.text-reveal {
  z-index: 6001;
}
</style>




</head>

<body >
  <section class="container"><div class="logotype bounce">awesome</div><div class="container text-reveal"><h1 class="anim">Look again at that dot. That'.........完整代码请登录后点击上方下载按钮下载查看