注册表单点击动画效果代码-html代码-BFW代码库

代码语言：html
代码描述：注册表单点击动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>

  <meta charset="UTF-8">
  

  
  
<style>
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap");
@font-face {
  font-family: "Balloon-Base";
  src: url("https://assets.codepen.io/1385231/Balloon+Base.otf");
}
body {
  display: grid;
  place-items: center;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background: #fff;
}
body * {
  box-sizing: border-box;
}
body.sliding #bounce input#submit {
  transition: opacity 0.2s ease-in-out;
  opacity: 0;
}
body.sliding #wrap {
  background-position: 50% 600px;
  box-shadow: inset 0 0 0 0 #fff;
  -webkit-animation: bounce2 0.5s ease-in-out 10 alternate 0.3s;
          animation: bounce2 0.5s ease-in-out 10 alternate 0.3s;
}
@-webkit-keyframes bounce2 {
  to {
    background-size: 225px 725px;
  }
}
@keyframes bounce2 {
  to {
    background-size: 225px 725px;
  }
}
body.sliding #wrap:before {
  transform: scale(0);
}
body.sliding #wrap .shark:before {
  transform: scaleX(1);
  transition-delay: 3.25s;
}
body.sliding #wrap .shark .inner {
  transform: translateY(0);
  transition-delay: 3.5s;
}
body.sliding #wrap .shark .inner:before, body.sliding #wrap .shark .inner:after {
  transition-delay: 0s;
  height: 60px;
  transform: translateY(0px);
  background: #000;
}
body.sliding #wrap .shark .inner:after {
  background: #fff;
}
body.sliding #fakeform:before {
  transition: -webkit-clip-path 0.3s ease-in-out;
  transition: clip-path 0.3s ease-in-out;
  transition: clip-path 0.3s ease-in-out, -webkit-clip-path 0.3s ease-in-out;
  transform: translateY(0);
  transition-delay: 0.3s;
  opacity: 1;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
          clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
body.sliding #fakeform p {
  transform: translateX(35px);
}
body.sliding #fakeform p > span {
  -webkit-animation-play-state: running;
          animation-play-state: running;
}
body.sliding #fakeform p > span:last-of-type:after {
  display: none;
}
body.sliding #fakeform p > span > span {
  -webkit-animation-play-state: running;
          animation-play-state: running;
}
body.sliding #fakeform p > span > span:before {
  -webkit-animation-play-state: running;
          animation-play-state: running;
}
body.sliding svg {
  transform: translateY(25px);
}
body.sliding svg marker path {
  fill: #EAB308;
}
body.sliding svg path#slide {
  d: path("M 740 620 Q 520 620 520 430 ");
  stroke: #fff;
  transform: translate(50px, -50px);
  transition-delay: 0.2s;
}
body.sliding svg path#bottom {
  stroke: #3B82F6;
  stroke-width: 120;
  transform: translateY(50px);
  transition-delay: 0.2s;
  transition-duration: 0.5s;
}
body.sliding svg path#base {
  stroke: #EAB308;
  stroke-width: 140;
  transform: translateY(100px);
  transition-delay: 0.3s;
  transition-duration: 0.75s;
}
body.sliding svg path#top, body.sliding svg path#mid {
  stroke: #F43F5E;
  d: path("M 60 130 C 90 170 90 220 90 270 L 90 470 L 710 470 L 710 270 C 710 220 710 170 740 130  ");
  stroke-width: 100;
  -webkit-animation: waving 0.35s ease-in-out 2.5 alternate forwards 0.3s;
          animation: waving 0.35s ease-in-out 2.5 alternate forwards 0.3s;
}
@-webkit-keyframes waving {
  to {
    d: path("M 120 120 C 90 170 90 220 90 270 L 90 470 L 710 470 L 710 270 C 710 220 710 170 680 120 ");
  }
}
@keyframes waving {
  to {
    d: path("M 120 120 C 90 170 90 220 90 270 L 90 470 L 710 470 L 710 270 C 710 220 710 170 680 120 ");
  }
}
body .shark {
  position: absolute;
  width: 200px;
  height: 200px;
  right: -150px;
  bottom: -350px;
  overflow: hidden;
  z-index: 99;
}
body .shark:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 100%;
  background: #000;
  transition: 0.3s ease-in-out;
  transition-delay: 1.5s;
  z-index: 9;
  transform: scaleX(0);
}
body .shark .inner {
  position: absolute;
  width: 150px;
  height: 100%;
  left: 100px;
  top: 0;
  background: radial-gradient(ellipse at center, #fff 1px, #000 1px, #000 3px, transparent 5px) 50px 50%/10px 20px no-repeat, radial-gradient(ellipse at bottom left, #fff 45px, #fff 45px, #efefef 55px, transparent 55px) 0px 100%/100px 250px no-repeat, radial-gradient(ellipse at bottom left, transparent 45px, #ccc 45px, #ccc 75px, transparent 75px) 0px calc(100% + 2.5px)/95px 250px no-repeat;
  -webkit-box-reflect: left -2px;
  transition: 0.4s ease-in-out;
  transition-delay: 1s;
  transform: translateY(100%);
}
body .shark .inner:before, body .shark .inner:after {
  content: "";
  position: absolute;
  width: 80px;
  border-radius: 40px 40px 20px 20px/50px 50px 20px 20px;
  background: #000;
  box-shadow: 0 0 0 3px #F43F5E;
  bottom: 20px;
  left: -40px;
  transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.005);
  height: 2px;
  transform: translateY(-35px);
  background: #000;
}
body .shark .inner:after {
  -webkit-clip-path: polygon(1% 33%, 15% 51%, 17% 15%, 31% 46%, 42% 6%, 47% 45%, 60% 8%, 65% 44%, 80% 14%, 81% 47%, 99% 31%, 100% 79%, 88% 75%, 84% 94%, 70% 81%, 66% 94%, 53% 81%, 44% 94%, 34% 79%, 25% 93%, 16% 79%, 8% 91%, 0% 85%, 1% 100%, 99% 100%, 99% 0%, 2% 0%);
          clip-path: polygon(1% 33%, 15% 51%, 17% 15%, 31% 46%, 42% 6%, 47% 45%, 60% 8%, 65% 44%, 80% 14%, 81% 47%, 99% 31%, 100% 79%, 88% 75%, 84% 94%, 70% 81%, 66% 94%, 53% 81%, 44% 94%, 34% 79%, 25% 93%, 16% 79%, 8% 91%, 0% 85%, 1% 100%, 99% 100%, 99% 0%, 2% 0%);
}
body svg {
  position: absolute;
  width: 1000px;
  height: 800px;
  top: calc(50% - 400px);
  left: calc(50% - 500px);
  transition: 0.5s ease-in-out;
  z-index: 1;
}
body svg marker path {
  stroke-width: 0;
}
body svg path {
  stroke-width: 5;
  fill: transparent;
  stroke: #000;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.075);
  stroke: #3B82F6;
}
body svg path#slide {
  stroke-width: 105;
  stroke-linecap: butt;
}
body #fakeform {
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 100;
  top: 0;
  font-family: "IBM Plex Mono", monospace;
  pointer-events: none;
}
body #fakeform:before {
  transform-style: preserve-3d;
  content: "";
  width: calc(100% - 50px);
  left: 25px;
  height: 250px;
  background: radial-gradient(circle at bottom, transparent 53px, #F43F5E 53px, #F43F5E 60px, transparent 60px) -376px 100%/100% 450px, repeating-linear-gradient(45deg, #EAB308 5px, transparent 5px, transparent 25px, #EAB308 25px, #EAB308 30px), repeating-linear-gradient(-45deg, #EAB308 5px, transparent 5px, transparent 25px, #EAB308 25px, #EAB308 30px);
  position: absolute;
  top: -160px;
  z-index: 9;
  box-shadow: inset 0 10px 0 0 #F43F5E, inset -10px 0 0 #F43F5E, inset 10px 0 0 #F43F5E;
  border-radius: 10px;
  -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
          clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
  transition: opacity 0.2s ease-in-out;
  opacity: 0;
  transform: translateY(-150px);
  -webkit-mask: radial-gradient(circle at bottom, transparent 53px, #000 53px) -376px 100%/100% 450px;
          mask: radial-gradient(circle at bottom, transparent 53px, #000 53px) -376px 100%/100% 450px;
}
body #fakeform p {
  height: 100%;
  position: absolute;
  top: -415px;
  left: -75px;
  font-size: 24px;
  transition: 0.2s ease-in-out;
}
body #fakeform p > span {
  width: 15px;
  position: absolute;
  offset-distance: 100%;
  offset-path: path("M 690 620 Q 520 620 520 430 L 80 430 ");
  color: transparent;
  -webkit-animation: slide 2s ease-in 1 forwards;
          animation: slide 2s ease-in 1 forwards;
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
  transform: scaleY(-1) scaleX(-1);
  --height:1;
  --flip:0;
  --flipx:1;
}
body #fakeform p > span > span {
  -webkit-animation: bounce calc(0.45s * var(--height)) ease-in-out 6 alternate;
          animation: bounce calc(0.45s * var(--height)) ease-in-out 6 alternate;
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
  display: inline-block;
  position: absolute;
  width: 15px;
  height: 15px;
  left: 50%;
  top: 50%;
  color: transparent;
  transform: translate(-50%, -50%);
  perspective: 500px;
}
body #fakeform p > span > span:before {
  content: attr(data-char);
  color: #000;
  position: absolute;
  left: 50%;
  top: 50%;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translate(-50%, -50%);
  -webkit-animation: flip calc(0.45s * var(--height)) ease-in-out 5, tumble 0.5s ease-in-out infinite;
          animation: flip calc(0.45s * var(--height)) ease-in-out 5, tumble 0.5s ease-in-out infinite;
  transform: rotate(0deg) translate(-50%, -50%);
  transform-style: preserve-3d;
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}
@-webkit-keyframes tumble {
  from {
    transform-origin: -5px 50%;
    transform: rotate(0deg) translate(-50%, -50%);
  }
  to {
    transform-origin: -5px 50%;
    transform: rotate(360deg) translate(-50%, -50%);
  }
}
@keyframes tumble {
  from {
    transform-origin: -5px 50%;
    transform: rotate(0deg) translate(-50%, -50%);
  }
  to {
    transform-origin: -5px 50%;
    transform: rotate(360deg) translate(-50%, -50%);
  }
}
@-webkit-keyframes flip {
  0% {
    transform: rotateX(0deg) rotate(0deg) translate(-50%, -50%);
  }
  100% {
    transform: rotateX(calc(360deg * var(--flipx))) rotate(calc(360deg * var(--flip))) translate(-50%, -50%);
  }
}
@keyframes flip {
  0% {
    transform: rotateX(0deg) rotate(0deg) translate(-50%, -50%);
  }
  100% {
    transform: rotateX(calc(360deg * var(--flipx))) rotate(calc(360deg * var(--flip))) translate(-50%, -50%);
  }
}
body #fakeform p > span:nth-of-type(2n) {
  --height:1.15;
}
body #fakeform p > span:nth-of-type(3n) {
  --height:1.25;
}
body #fakeform p > span:nth-of-type(4n) {
  --height:0.75;
  --flip:-1;
}
body #fakeform p > span:nth-of-type(even) {
  --flip:1;
  --flipx:0;
}
body #fakeform p > span:nth-of-type(1) {
  offset-distance: calc(100% - 15px);
  -webkit-animation-delay: calc(1s + 1.75s * var(--height) + (0.05s * var(--height)));
          animation-delay: calc(1s + 1.75s * var(--height) + (0.05s * var(--height)));
}
body #fakeform p > span:nth-of-type(1) > span {
  -webkit-animation-delay: calc(0.05s * var(--height));
          animation-delay: calc(0.05s * var(--height));
}
body #fakeform p > span:nth-of-type(1) > span:before {
  -webkit-animation-delay: calc(0.05s * var(--height)), calc(0.05s * var(--height) + 3s);
          animation-delay: calc(0.05s * var(--height)), calc(0.05s * var(--height) + 3s);
}
@-webkit-keyframes bounce {
  to {
    transform: translateY(calc(-100px * var(--height)));
  }
}
@keyframes bounce {
  to {
    transform: translateY(calc(-100px * var(--height)));
  }
}
@-webkit-keyframes slide {
  75% {
    offset-distance: 0;
    transform: scaleY(-1) scaleX(-1);
  }
  99.5% {
    offset-distance: 0;
    transform: scaleY(-1) scaleX(-1) translateY(150px);
    opacity: 1;
  }
  100% {
    offset-distance: 0;
    opacity: 0;
    transform: scaleY(-1) scaleX(-1) translateY(150px);
  }
}
@keyframes slide {
  75% {
    offset-distance: 0;
    transform: scaleY(-1) scaleX(-1);
  }
  99.5% {
    offset-distance: 0;
    transform: scaleY(-1) scaleX(-1) translateY(150px);
    opacity: 1;
  }
  100% {
    offset-distance: 0;
    opacity: 0;
    transform: scaleY(-1) scaleX(-1) translateY(150px);
  }
}
body #fakeform p > span:nth-of-type(2) {
  offset-distance: calc(100% - 30px);
  -webkit-animation-delay: calc(1s + 1.75s * var(--height) + (0.1s * var(--height)));
          animation-delay: calc(1s + 1.75s * var(--height) + (0.1s * var(--height)));
}
body #fakeform p > span:nth-of-type(2) > span {
  -webkit-animation-delay: calc(0.1s * var(--height));
          animation-delay: calc(0.1s * var(--height));
}
body #fakeform p > span:nth-of-type(2) > span:before {
  -webkit-animation-delay: calc(0.1s * var(--height)), calc(0.1s * var(--height) + 3s);
          animation-delay: calc(0.1s * var(--height)), calc(0.1s * var(--height) + 3s);
}
@keyframes bounce {
  to {
    transform: translateY(calc(-100px * var(--height)));
  }
}
@keyframes slide {
  75% {
    offset-distance: 0;
    transform: scaleY(-1) scaleX(-1);
  }
  99.5% {
    offset-distance: 0;
    transform: scaleY(-1) scaleX(-1) translateY(150px);
    opacity: 1;
  }
  100% {
    offset-distance: 0;
    opacity: 0;
    transform: scaleY(-1) scaleX(-1) translateY(150px);
  }
}
body #fakeform p > span:nth-of-type(3) {
  offset-distance: calc(100% - 45px);
  -webkit-animation-delay: calc(1s + 1.75s * var(--height) + (0.15s * var(--height)));
          animation-delay: calc(1s + 1.75s * var(--height) + (0.15s * var(--height)));
}
body #fakeform p > span:nth-of-type(3) > span {
  -webkit-animation-delay: calc(0.15s * var(--height));
          animation-delay: calc(0.15s * var(--height));
}
body #fakeform p > span:nth-of-type(3) > span:before {
  -webkit-animation-delay: calc(0.15s * var(--height)), calc(0.15s * var(--height) + 3s);
          animation-delay: calc(0.15s * var(--height)), calc(0.15s * var(--height) + 3s);
}
@keyframes bounce {
  to {
    transform: translateY(calc(-100px * var(--height)));
  }
}
@keyframes slide {
  75% {
    offset-distance: 0;
    transform: scaleY(-1) scaleX(-1);
  }
  99.5% {
    offset-distance: 0;
    transform: scaleY(-1) scaleX(-1) translateY(150px);
    opacity: 1;
  }
  100% {
    offset-distance: 0;
    opacity: 0;
    transform: scaleY(-1) scaleX(-1) translateY(150px);
  }
}
body #fakeform p > span:nth-of-type(4) {
  offset-distance: calc(100% - 60px);
  -webkit-animation-delay: calc(1s + 1.75s * var(--height) + (0.2s * var(--height)));
          animation-delay: calc(1s + 1.75s * var(--height) + (0.2s * var(--height)));
}
body #fakeform p > span:nth-of-type(4) > span {
  -webkit-animation-delay: calc(0.2s * var(--height));
          animation-delay: calc(0.2s * var(--height));
}
body #fakeform p > span:nth-of-type(4) > span:before {
  -webkit-animation-delay: calc(0.2s * var(--height)), calc(0.2s * var(--height) + 3s);
          animation-delay: calc(0.2s * var(--height)), calc(0.2s * var(--height) + 3s);
}
@keyframes bounce {
  to {
    transform: translateY(calc(-100px * var(--height)));
  }
}
@keyframes slide {
  75% {
    offset-distance: 0;
    transform: scaleY(-1) scaleX(-1);
  }
  99.5% {
    offset-distance: 0;
    transform: scaleY(-1) scaleX(-1) translateY(150px);
    opacity: 1;
  }
  100% {
    offset-distance: 0;
    opacity: 0;
    transform: scaleY(-1) scaleX(-1) translateY(150px);
  }
}
body #fakeform p > span:nth-of-type(5) {
  offset-distance: calc(100% - 75px);
  -webkit-animation-delay: calc(1s + 1.75s * var(--height) + (0.25s * var(--height)));
          animation-delay: calc(1s + 1.75s * var(--height) + (0.25s * var(--height)));
}
body #fakeform p > span:nth-of-type(5) > span {
  -webkit-animation-delay: calc(0.25s * var(--height));
          animation-delay: calc(0.25s * var(--height));
}
body #fakeform p > span:nth-of-type(5) > span:before {
  -webkit-animation-delay: calc(0.25s * var(--height)), calc(0.25s * var(--height) + 3s);
          animation-delay: calc(0.25s * var(--height)), calc(0.25s * var(--height) + 3s);
}
@keyframes bounce {
  to {
    transform: translateY(calc(-100px * var(--height)));
  }
}
@keyframes slide {
  75% {
    offset-distance: 0;
    transform: scaleY(-1) scaleX(-1);
  }
  99.5% {
    offset-distance: 0;
    transform: scaleY(-1) scaleX(-1) translateY(150px);
    opacity: 1;
  }
  100% {
    offset-distance: 0;
    opacity: 0;
    transform: scaleY(-1) scaleX(-1) translateY(150px);
  }
}
body #fakeform p > span:nth-of-type(6) {
  offset-distance: calc(100% - 90px);
  -webkit-animation-delay: calc(1s + 1.75s * var(--height) + (0.3s * var(--height)));
          animation-delay: calc(1s + 1.75s * var(--height) + (0.3s * var(--height)));
}
body #fakeform p > span:nth-of-type(6) > span {
  -webkit-animation-delay: calc(0.3s * var(--height));
          animation-delay: calc(0.3s * var(--height));
}
body #fakeform p > span:nth-of-type(6) > span:before {
  -webkit-animation-delay: calc(0.3s * var(--height)), calc(0.3s * var(--height) + 3s);
          animation-delay: calc(0.3s * var(--height)), calc(0.3s * var(--height) + 3s);
}
@keyframes bounce {
  to {
    transform: translateY(calc(-100px * var(--height)));
  }
}
@keyframes slide {
  75% {
    offset-distance: 0;
    transform: scaleY(-1) scaleX(-1);
  }
  99.5% {
    offset-distance: 0;
    transform: scaleY(-1) scaleX(-1) translateY(150px);
    opacity: 1;
  }
  100% {
    offset-distance: 0;
    opacity: 0;
    transform: scaleY(-1) scaleX(-1) translateY(150px);
  }
}
body #fakeform p > span:nth-of-type(7) {
  offset-distance: calc(100% - 105px);
  -webkit-animation-delay: calc(1s + 1.75s * var(--height) + (0.35s * var(--height)));
          animation-delay: calc(1s + 1.75s * var(--height) + (0.35s * var(--height)));
}
body #fakeform p > span:nth-of-type(7) > span {
  -webkit-animation-delay: calc(0.35s * var(--height));
          animation-delay: calc(0.35s * var(--height));
}
body #fakeform p > span:nth-of-type(7) > span:before {
  -webkit-animation-delay: calc(0.35s * var(--height)), calc(0.35s * var(--height) + 3s);
          animation-delay: calc(0.35s * var(--height)), calc(0.35s * var(--height) + 3s);
}
@keyframes bounce {
  to {
    transform: translateY(calc(-100px * var(--height)));
  }
}
@keyframes slide {
  75% {
    offset-distance: 0;
    transform: scaleY(-1) scaleX(-1);
  }
  99.5% {
    offset-distance: 0;
    transform: scaleY(-1) scaleX(-1) translateY(150px);
    opacity: 1;
  }
  100% {
    offset-distance: 0;
    opacity: 0;
    transform: scaleY(-1) scaleX(-1) translateY(150px);
  }
}
body #fakeform p > span:nth-of-type(8) {
  offset-distance: calc(100% - 120px);
  -webkit-animation-delay: calc(1s + 1.75s * var(--height) + (0.4s * var(--height)));
          animation-delay: calc(1s + 1.75s * var(--height) + (0.4s * var(--height)));
}
body #fakeform p > span:nth-of-type(8) > span {
  -webkit-animation-delay: calc(0.4s * var(--height));
          animation-delay: calc(0.4s * var(--height));
}
body #fakeform p > span:nth-of-type(8) > span:before {
  -webkit-animation-delay: calc(0.4s * var(--height)), calc(0.4s * var(--height) + 3s);
          animation-delay: calc(0.4s * var(--height)), calc(0.4s * var(--height) + 3s);
}
@keyframes bounce {
  to {
    transform: translateY(calc(-100px * var(--height)));
  }
}
@keyframes slide {
  75% {
    offset-distance: 0;
    transform: scaleY(-1) scaleX(-1);
  }
  99.5% {
    offset-distance: 0;
    transform: scaleY(-1) scaleX(-1) translateY(150px);
    opacity: 1;
  }
  100% {
    offset-distance: 0;
    opacity: 0;
    transform: scaleY(-1) scaleX(-1) translateY(150px);
  }
}
body #fakeform p > span:nth-of-type(9) {
  offset-distance: calc(100% - 135px);
  -webkit-animation-delay: calc(1s + 1.75s * var(--height) + (0.45s * var(--height)));
          animation-delay: calc(1s + 1.75s * var(--height) + (0.45s * var(--height)));
}
body #fakeform p > span:nth-of-type(9) > span {
  -webkit-animation-delay: calc(0.45s * var(--height));
          animation-delay: calc(0.45s * var(--height));
}
body #fakeform p > span:nth-of-type(9) > span:before {
  -webkit-animation-delay: calc(0.45s * var(--height)), calc(0.45s * var(--height) + 3s);
          animation-delay: calc(0.45s * var(--height)), calc(0.45s * var(--height) + 3s);
}
@keyframes bounce {
  to {
    transform: translateY(calc(-100px * var(--height)));
  }
}
@keyframes slide {
  75% {
    offset-distance: 0;
    transform: scaleY(-1) scaleX(-1);
  }
  99.5% {
    offset-distance: 0;
    transform: scaleY(-1) scaleX(-1) translateY(150px);
    opacity: 1;
  }
  100% {
    offset-distance: 0;
    opacity: 0;
    transform: scaleY(-1) scaleX(-1) translateY(150px);
  }
}
body #fakeform p > span:nth-of-type(10) {
  offset-distance: calc(100% - 150px);
  -webkit-animation-delay: calc(1s + 1.75s * var(--height) + (0.5s * var(--height)));
          animation-delay: calc(1s + 1.75s * var(--height) + (0.5s * var(--height)));
}
body #fakeform p > span:nth-of-type(10) > span {
  -webkit-animation-delay: calc(0.5s * var(--height));
          animation-delay: calc(0.5s * var(--height));
}
body #fakeform p > span:nth-of-type(10) > span:before {
  -webkit-animation-delay: calc(0.5s * var(--height)), calc(0.5s * var(--height) + 3s);
          animation-delay: calc(0.5s * var(--height)), calc(0.5s * var(--height) + 3s);
}
@keyframes bounce {
  to {
    transform: translateY(calc(-100px * var(--height)));
  }
}
@keyframes slide {
  75% {
    offset-distance: 0;
    transform: scaleY(-1) scaleX(-1);
  }
  99.5% {
    offset-distance: 0;
    transform: scaleY(-1) scaleX(-1) translateY(150px);
    opacity: 1;
  }
  100% {
    offset-distance: 0;
    opacity: 0;
    transform: scaleY(-1) scaleX(-1) translateY(150px);
  }
}
body #fakeform p > span:nth-of-type(11) {
  offset-distance: calc(100% - 165px);
  -webkit-animation-delay: calc(1s + 1.75s * var(--height) + (0.55s * var(--height)));
          animation-delay: calc(1s + 1.75s * var(--height) + (0.55s * var(--height)));
}
body #fakeform p > span:nth-of-type(11) > span {
  -webkit-animation-delay: calc(0.55s * var(--height));
          animation-delay: calc(0.55s * var(--height));
}
body #fakeform p > span:nth-of-type(11) > span:before {
  -webkit-animation-delay: calc(0.55s * var(--height)), calc(0.55s * var(--height) + 3s);
          animation-delay: calc(0.55s * var(--height)), calc(0.55s * var(--height) + 3s);
}
@keyframes bounce {
  to {
    transform: translateY(calc(-100px * var(--height)));
  }
}
@keyframes slide {
  75% {
    offset-distance: 0;
    transform: scaleY(-1) scaleX(-1);
  }
  99.5% {
    offset-distance: 0;
    transform: scaleY(-1) scaleX(-1) translateY(150px);
    opacity: 1;
  }
  100% {
    offset-distance: 0;
    opacity: 0;
    transform: scaleY(-1) scaleX(-1) translateY(150px);
  }
}
body #fakeform p > span:nth-of-type(12) {
  offset-distance: calc(100% - 180px);
  -webkit-animation-delay: calc(1s + 1.75s * var(--height) + (0.6s * var(--height)));
          animation-delay: calc(1s + 1.75s * var(--height) + (0.6s * var(--height)));
}
body #fakeform p > span:nth-of-type(12) > span {
  -webkit-animation-delay: calc(0.6s * var(--height));
          animation-delay: calc(0.6s * var(--height));
}
body #fakeform p > span:nth-of-type(12) > span:before {
  -webkit-animation-delay: calc(0.6s * var(--height)), calc(0.6s * var(--height) + 3s);
          animation-delay: calc(0.6s * var(--height)), calc(0.6.........完整代码请登录后点击上方下载按钮下载查看