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

代码语言：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;
}
.word__letter--a-7 {
  -webkit-animation-name: drop-7;
          animation-name: drop-7;
}
.word__letter--a-8 {
  -webkit-animation-name: drop-8;
          animation-name: drop-8;
}
.word__letter--a-9 {
  -webkit-animation-name: drop-9;
          animation-name: drop-9;
}
.word__letter--a-10 {
  -webkit-animation-name: drop-10;
          animation-name: drop-10;
}

.drops {
  position: relative;
  height: 100%;
  z-index: -1;
  filter: url(#flou);
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.drops .word__letter {
  border-radius: 50%;
  color: var(--drops-color);
  background-color: currentColor;
}
.drops .word__letter--t-1 {
  box-shadow: 0.0103535137em 0.0273499367em 0 0.1669349126em currentColor;
}
.drops .word__letter--t-2 {
  box-shadow: 0.0034308136em 0.0015963964em 0 0.2549379684em currentColor;
}
.drops .word__letter--t-3 {
  box-shadow: 0.0138641198em 0.0105913508em 0 0.0584335821em currentColor;
}
.drops .word__letter--t-4 {
  box-shadow: 0.028413018em 0.0096212863em 0 0.0155671912em currentColor;
}
.drops .word__letter--t-5 {
  box-shadow: 0.0002176439em 0.0139649238em 0 0.0733904526em currentColor;
}
.drops .word__letter--t-6 {
  box-shadow: 0.0283234331em 0.0263944414em 0 0.0787453716em currentColor;
}
.drops .word__letter--t-7 {
  box-shadow: 0.0025378415em 0.0037729442em 0 0.326912398em currentColor;
}
.drops .word__letter--t-8 {
  box-shadow: 0.0044717902em 0.0299664952em 0 0.1770143347em currentColor;
}
.drops .word__letter--t-9 {
  box-shadow: 0.008695784em 0.029651637em 0 0.1572546876em currentColor;
}
.drops .word__letter--t-10 {
  box-shadow: 0.0154548007em 0.0007652903em 0 0.153328835em currentColor;
}

.filter {
  display: none;
}

@-webkit-keyframes drop-1 {
  0% {
    transform: translate(0, 600px);
  }
  80% {
    transform: translate(0, -5px);
  }
  100% {
    transform: translate(0, 0);
  }
}

@keyframes drop-1 {
  0% {
    transform: translate(0, 600px);
  }
  80% {
    transform: translate(0, -5px);
  }
  100% {
    transform: translate(0, 0);
  }
}
@-webkit-keyframes drop-2 {
  0% {
    transform: translate(0, 600px);
  }
  80% {
    transform: translate(0, -5px);
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes drop-2 {
  0% {
    transform: translate(0, 600px);
  }
  80% {
    transform: translate(0, -5px);
  }
  100% {
    transform: translate(0, 0);
  }
}
@-webkit-keyframes drop-3 {
  0% {
    transform: translate(0, 600px);
  }
  80% {
    transform: translate(0, -5px);
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes drop-3 {
  0% {
    transform: translate(0, 600px);
  }
  80% {
    transform: translate(0, -5px);
  }
  100% {
    transform: translate(0, 0);
  }
}
@-webkit-keyframes drop-4 {
  0% {
    transform: translate(0, 600px);
  }
  80% {
    transform: transla.........完整代码请登录后点击上方下载按钮下载查看