捐款弹出输入金额动画效果-html代码-BFW代码库

捐款弹出输入金额动画效果

代码语言：html

代码描述：捐款弹出输入金额动画效果

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500&amp;display=swap'>
<style>
.donate {
  --input-background: #4171FE;
  --input-color: #FFFFFF;
  --input-line: #FFFFFF;
  --button-background: #FFFFFF;
  --button-background-hover: #ECEFFC;
  --button-color: #275EFE;
  --button-icon-color: #275EFE;
  --thanks-color: #FFFFFF;
  --letter-inner: #CEDAFF;
  --letter-inner-top: #E0E8FF;
  --letter-border: #E5E9F3;
  font-family: 'Roboto Mono', monospace;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  position: relative;
  text-align: center;
  width: 132px;
}
.donate:not(.open):hover {
  --background: var(--button-background-hover);
}
.donate:not(.open) form {
  pointer-events: none;
}
.donate.open {
  --span-opacity: 0;
  --span-opacity-delay: 0s;
  --letter-opacity: 1;
  --letter-opacity-delay: .2s;
  --letter-inside-opacity: 1;
  --letter-inside-opacity-delay: .4s;
  --border-radius: 2px;
  --border-radius-delay: 0s;
}
.donate.open:not(.submit) {
  --input-y: -92px;
  --input-y-delay: .9s;
  --letter-top-y: 1px;
  --letter-top-rotate: 180deg;
  --letter-top-rotate-delay: .5s;
  --letter-top-index: 0;
  --letter-top-index-delay: .9s;
  --letter-background: var(--letter-inner-top);
  --letter-background-delay: .65s;
  --input-scale-background: 1;
  --input-scale-background-delay: 1.1s;
  --input-scale-line: 1;
  --input-scale-line-delay: 1.1s;
}
.donate.open.submit button {
  -webkit-animation: move .4s linear 1.1s forwards;
          animation: move .4s linear 1.1s forwards;
}
.donate .thanks {
  position: absolute;
  left: 0;
  right: 0;
  top: 12px;
  color: var(--thanks-color);
  font-size: 16px;
  font-weight: 500;
}
.donate button {
  display: block;
  cursor: pointer;
  font: inherit;
  position: relative;
 .........完整代码请登录后点击上方下载按钮下载查看