捐款弹出输入金额动画效果-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) {
.........完整代码请登录后点击上方下载按钮下载查看