js+css实现文字逐个飞入动画效果代码-html代码-BFW代码库

js+css实现文字逐个飞入动画效果代码

代码语言：html

所属分类：动画

代码描述：js+css实现文字逐个飞入动画效果代码

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

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

<head>
  <meta charset="UTF-8">
  


  
  
  
  
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  --text-color: #f6f1e6;
  --drops-color: #231d1c;
  background: var(--text-color);
  font-family: Georgia, serif;
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.word {
  position: absolute;
  display: flex;
  transform: rotate(var(--r, 0deg)) translate(calc(-50% - var(--x, 0)), calc(-50% - var(--y, 0)));
  top: 50%;
  left: 50%;
  color: var(--text-color);
  font-size: 6vmin;
  white-space: pre;
}
.word__letter {
  transform: translateY(800px);
  padding: 0.1em 0.2em;
  margin: -0.1em -0.2em;
  -webkit-animation: 800ms var(--delay) ease-out forwards;
          animation: 800ms var(--delay) ease-out forwards;
  will-change: transform;
}
.word__letter--a-1 {
  -webkit-animation-name: drop-1;
          animation-name: drop-1;
}
.word__letter--a-2 {
  -webkit-animation-name: drop-2;
          animation-name: drop-2;
}
.word__letter--a-3 {
  -webkit-animation-name: drop-3;
          animation-name: drop-3;
}
.word__letter--a-4 {
  -webkit-animation-name: drop-4;
          animation-name: drop-4;
}
.word__letter--a-5 {
  -webkit-animation-name: drop-5;
          animation-name: drop-5;
}
.word__letter--a-6 {
  -webkit-animation-name: drop-6;
          animation-name: drop-6;
}
.wor.........完整代码请登录后点击上方下载按钮下载查看