gsap实现万圣节输入框动画效果代码-html代码-BFW代码库

代码语言：html
代码描述：gsap结合easepack和css代码实现一个万圣节风格的输入框聚焦弹出动画效果代码。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>

  <meta charset="UTF-8">


  
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Creepster&display=swap");
body {
  font-size: 16px;
  font-family: "Creepster", cursive;
}

.horror-input-background {
  background-color: #2f2f2f;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  flex-wrap: nowrap;
  overflow: hidden;
}

.horror-input-title,
.horror-input-sub-title {
  color: #09e639;
  text-align: center;
  padding: 0;
  margin: 0;
}

.horror-input-title {
  font-size: 32px;
  margin-bottom: 40px;
}

.horror-input-sub-title {
  font-size: 24px;
  margin-bottom: 20px;
}

.horror-input-text-container {
  position: relative;
}

.horror-input-text {
  font: inherit;
  background-color: #ffffff;
  width: 250px;
  height: 50px;
  padding: 15px;
  border: 0;
  outline: 0;
  position: relative;
  box-sizing: border-box;
  border-radius: 8px;
}

.horror-input-burrow {
  --size: 64px;
  width: var(--size);
  height: var(--size);
  overflow: hidden;
  position: absolute;
  pointer-events: none;
}
.horror-input-burrow .horror-input-image {
  transform: translateY(100%);
  width: 100%;
  height: 100%;
}

.horror-input-castle-left,
.horror-input-castle-right {
  --size: 128px;
  bottom: 100%;
}

.horror-input-castle-left {
  left: 0;
  transform: translateX(-50%) translateY(15%) rotate(-17.5deg);
}
.horror-input-castle-left .horror-input-image {
  width: 128px;
  height: 128px;
  position: relative;
}
.horror-input-castle-left .horror-input-image div {
  position: absolute;
}
.horror-input-castle-left .horror-input-castle-left-gate {
  background-color: #2c2c2c;
  width: 128px;
  height: 24px;
  position: absolute;
  bottom: 0;
  left: 0px;
}
.horror-input-castle-left .horror-input-castle-left-gate::before {
  content: "";
  background-image: linear-gradient(to right, #2c2c2c 0px 16px, transparent 16px 24px);
  background-position: -4px 0;
  background-repeat: repeat-x;
  background-size: 24px 8px;
  width: 128px;
  height: 8px;
  position: absolute;
  bottom: 100%;
}
.horror-input-castle-left .horror-input-castle-left-gate-door {
  background-color: #2c2c2c;
  width: 48px;
  height: 40px;
  position: absolute;
  bottom: 0;
  left: 40px;
}
.horror-input-castle-left .horror-input-castle-left-gate-roof {
  width: 0;
  height: 0;
  border: 0;
  border-left: solid 24px transparent;
  border-right: solid 24px transparent;
  border-bottom: solid 16px #2c2c2c;
  position: absolute;
  bottom: 40px;
  left: 40px;
}
.horror-input-castle-left .horror-input-castle-left-gate-roof::before, .horror-input-castle-left .horror-input-castle-left-gate-roof::after {
  content: "";
  background-color: #2c2c2c;
  width: 28px;
  height: 7px;
  position: absolute;
  bottom: calc(100% - 1px);
}
.horror-input-castle-left .horror-input-castle-left-gate-roof::before {
  right: 100%;
  transform-origin: bottom right;
  transform: skewY(-33.690067526deg);
}
.horror-input-castle-left .horror-input-castle-left-gate-roof::after {
  left: 100%;
  transform-origin: bottom left;
  transform: skewY(33.690067526deg);
}
.horror-input-castle-left .horror-input-castle-left-main-tower {
  background-color: #1f1f1f;
  width: 32px;
  height: 88px;
  position: absolute;
  bottom: 0;
  left: 48px;
}
.horror-input-castle-left .horror-input-castle-left-main-tower::before {
  content: "";
  width: 0;
  height: 0;
  border: 0;
  border-bottom: solid 40px #1f1f1f;
  border-left: solid 24px transparent;
  border-right: solid 24px transparent;
  position: absolute;
  bottom: 100%;
  left: -8px;
}
.horror-input-castle-left .horror-input-castle-left-left-tower,
.horror-input-castle-left .horror-input-castle-left-right-tower {
  background-color: #1f1f1f;
  width: 20px;
  height: 64px;
  position: absolute;
  bottom: 0;
}
.horror-input-castle-left .horror-input-castle-left-left-tower::before,
.horror-input-castle-left .horror-input-castle-left-right-tower::before {
  content: "";
  background-color: #1f1f1f;
  width: 26px;
  height: 12px;
  position: absolute;
  left: -3px;
  top: -8px;
}
.horror-input-castle-left .horror-input-castle-left-left-tower::after,
.horror-input-castle-left .horror-input-castle-left-right-tower::after {
  content: "";
  width: 0;
  height: 0;
  border: 0;
  border-bottom: solid 28px #1f1f1f;
  border-left: solid 10px transparent;
  border-right: solid 10px transparent;
  position: absolute;
  bottom: 100%;
}
.horror-input-castle-left .horror-input-castle-left-left-tower {
  left: 4px;
}
.horror-input-castle-left .horror-input-castle-left-right-tower {
  right: 4px;
}
.horror-input-castle-left .horror-input-castle-left-manor {
  background-color: #1f1f1f;
  width: 64px;
  height: 28px;
  position: absolute;
  bottom: 24px;
  left: 32px;
}
.horror-input-castle-left .horror-input-castle-left-manor-roof {
  background-color: #1f1f1f;
  width: 56px;
  height: 24px;
  position: absolute;
  bottom: 52px;
  left: 36px;
}
.horror-input-castle-left .horror-input-castle-left-manor-roof::before, .horror-input-castle-left .horror-input-castle-left-manor-roof::after {
  content: "";
  width: 0;
  height: 0;
  border: 0;
  border-bottom: solid 24px #1f1f1f;
  position: absolute;
  top: 0;
}
.horror-input-castle-left .horror-input-castle-left-manor-roof::before {
  border-left: solid 10px transparent;
  right: 100%;
}
.horror-input-castle-left .horror-input-castle-left-manor-roof::after {
  border-right: solid 10px transparent;
  left: 100%;
}
.horror-input-castle-left .horror-input-castle-left-gate-entry {
  background-color: #f5f53d;
  width: 24px;
  height: 20px;
  position: absolute;
  bottom: 0;
  left: 52px;
}
.horror-input-castle-left .horror-input-castle-left-gate-entry::before {
  content: "";
  background-color: #f5f53d;
  width: 24px;
  height: 12px;
  position: absolute;
  bottom: 100%;
  left: 0;
  border-radius: 50% 50% 0% 0%/100% 100% 0% 0%;
}
.horror-input-castle-left .horror-input-castle-left-gate-entry::after {
  content: "";
  background-image: linear-gradient(to bottom, transparent 0px 3px, #2c2c2c 3px 5px, transparent 5px 8px), linear-gradient(to right, transparent 0px 3px, #2c2c2c 3px 5px, transparent 5px 8px);
  background-repeat: repeat;
  background-size: 8px 8px;
  width: 24px;
  height: 32px;
  position: absolute;
  bottom: 0;
  left: 0;
}
.horror-input-castle-left .horror-input-castle-left-gate-hole {
  background-color: #000000;
  width: 6px;
  height: 6px;
  position: absolute;
}
.horror-input-castle-left .horror-input-castle-left-gate-hole::before {
  content: "";
  background-color: #000000;
  width: 6px;
  height: 6px;
  position: absolute;
  bottom: 100%;
  border-radius: 50% 50% 0% 0%/100% 100% 0% 0%;
}
.horror-input-castle-left .horror-input-castle-left-tower-window {
  background-color: #f5f53d;
  width: 6px;
  height: 8px;
  position: absolute;
  bottom: 40px;
}
.horror-input-castle-left .horror-input-castle-left-tower-window::before {
  content: "";
  background-color: #f5f53d;
  width: 6px;
  height: 6px;
  position: absolute;
  bottom: 100%;
  border-radius: 50% 50% 0% 0%/100% 100% 0% 0%;
}
.horror-input-castle-left .horror-input-castle-left-main-tower-window {
  background-color: #f5f53d;
  width: 12px;
  height: 4px;
  position: absolute;
  bottom: 72px;
  left: 58px;
}
.horror-input-castle-left .horror-input-castle-left-main-tower-window::before {
  content: "";
  background-color: #f5f53d;
  width: 12px;
  height: 8px;
  position: absolute;
  bottom: 100%;
  border-radius: 50% 50% 0% 0%/100% 100% 0% 0%;
}
.horror-input-castle-left .horror-input-castle-left-manor-window {
  background-color: #f5f53d;
  width: 6px;
  height: 6px;
  position: absolute;
  bottom: 44px;
}

.horror-input-castle-right {
  right: 0;
  transform: translateX(50%) translateY(15%) rotate(17.5deg);
}
.horror-input-castle-right .horror-input-image {
  width: 128px;
  height: 128px;
  position: relative;
}
.horror-input-castle-right .horror-input-image div {
  position: absolute;
}
.horror-input-castle-right .horror-input-castle-right-foundation {
  background-color: #1f1f1f;
  width: 112px;
  height: 8px;
  bottom: 0;
  left: 8px;
}
.horror-input-castle-right .horror-input-castle-right-base {
  background-color: #1f1f1f;
  width: 80px;
  height: 32px;
  bottom: 8px;
  left: 32px;
}
.horror-input-castle-right .horror-input-castle-right-fence {
  background-image: linear-gradient(to right, #1f1f1f 0% 50%, transparent 50% 100%), linear-gradient(to bottom, #1f1f1f 0px 2px, transparent 2px 100%);
  background-size: 4px 16px, 24px 16px;
  width: 24px;
  height: 16px;
  left: 8px;
}
.horror-input-castle-right .horror-input-castle-right-pillar {
  background-color: #1f1f1f;
  width: 2px;
  height: 32px;
  bottom: 8px;
  left: 8px;
}
.horror-input-castle-right .horror-input-castle-right-roof {
  background-color: #1f1f1f;
  width: 112px;
  height: 16px;
  bottom: 40px;
  left: 8px;
}
.horror-input-castle-right .horror-input-castle-right-roof::before, .horror-input-castle-right .horror-input-castle-right-roof::after {
  content: "";
  display: block;
  border: 0;
  border-bottom: solid 16px #1f1f1f;
  position: absolute;
}
.horror-input-castle-right .horror-input-castle-right-roof::before {
  border-left: solid 8px transparent;
  right: 100%;
}
.horror-input-castle-right .horror-input-castle-right-roof::after {
  border-right: solid 8px transparent;
  left: 100%;
}
.horror-input-castle-right .horror-input-castle-right-tower {
  background-color: #1f1f1f;
  width: 32px;
  height: 40px;
  bottom: 56px;
  left: 32px;
}
.horror-input-castle-right .horror-input-castle-right-tower::before {
  content: "";
  border: 0;
  border-left: solid 16px transparent;
  border-right: solid 16px transparent;
  border-bottom: solid 32px #1f1f1f;
  display: block;
  position: absolute;
  bottom: 100%;
  left: 0;
}
.horror-input-castle-right .horror-input-castle-right-wall {
  background-color: #1f1f1f;
  width: 48px;
  height: 24px;
  bottom: 56px;
  left: 64px;
}
.horror-input-castle-right .horror-input-castle-right-wall::before {
  content: "";
  border: 0;
  border-right: solid 48px transparent;
  border-bottom: solid 8px #1f1f1f;
  display: block;
  position: absolute;
  bottom: 100%;
  left: 0;
}
.horror-input-castle-right .horror-input-castle-right-attic-window {
  background-color: #f5f53d;
  width: 16px;
  height: 16px;
  bottom: 88px;
  left: 40px;
  border-radius: 50% 50% 0 0;
}
.horror-input-castle-right .horror-input-castle-right-attic-window::before, .horror-input-castle-right .horror-input-castle-right-attic-window::after {
  content: "";
  background-color: #1f1f1f;
  position: absolute;
}
.horror-input-castle-right .horror-input-castle-right-attic-window::before {
  width: 16px;
  height: 4px;
  top: 7px;
}
.horror-input-castle-right .horror-input-castle-right-attic-window:after {
  width: 4px;
  height: 20px;
  left: 6px;
}
.horror-input-castle-right .horror-input-castle-right-window {
  background-color: #f5f53d;
  width: 16px;
  height: 20px;
}
.horror-input-castle-right .horror-input-castle-right-window::before, .horror-input-castle-right .horror-input-castle-right-window::after {
  content: "";
  background-color: #1f1f1f;
  position: absolute;
}
.horror-input-castle-right .horror-input-castle-right-window::before {
  width: 16px;
  height: 4px;
  top: 8px;
}
.horror-input-castle-right .horror-input-castle-right-window:after {
  width: 4px;
  height: 20px;
  left: 6px;
}

.horror-input-pumpkin {
  --w: 64px;
  --h: 40px;
  --x: 0;
  --y: 0;
  background-color: #fc8803;
  width: var(--w);
  height: var(--h);
  position: absolute;
  top: var(--y);
  left: var(--x);
  border-radius: 30%/50%;
  pointer-events: none;
  transform: translateY(-200%) scale(0);
}
.horror-input-pumpkin::after {
  content: "";
  background-image: radial-gradient(circle at 25% 25%, transparent 0% 45%, rgba(0, 0, 0, 0.55) 90%), radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.3) 0% 5%, transparent 25% 90%);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 30%/50%;
}
.horror-input-pumpkin .horror-input-pumpkin-stem {
  --w: 8px;
  --h: 12px;
  width: 0;
  height: 0;
  border: 0;
  border-left: solid calc(var(--w) / 2) transparent;
  border-right: solid calc(var(--w) / 2) transparent;
  border-top: solid var(--h) #00ab03;
  position: absolute;
  bottom: 100%;
  left: calc(50% - calc(var(--w) / 2));
}

.horror-input-pumpkin-1 {
  --x: 214px;
  --y: 26px;
  transform-origin: bottom right;
}
.horror-input-pumpkin-1 .horror-input-pumpkin-eye {
  background-color: #000000;
  width: 16px;
  height: 8px;
  position: absolute;
  top: 10px;
  border-radius: 50% 50% 0% 0%/100% 100% 0% 0%;
}
.horror-input-pumpkin-1 .horror-input-pumpkin-eye-left {
  left: 8px;
}
.horror-input-pumpkin-1 .horror-input-pumpkin-eye-right {
  left: 32px;
}
.horror-input-pumpkin-1 .horror-input-pumpkin-mouth {
  background-color: #000000;
  width: 32px;
  height: 14px;
  position: absolute;
  top: 22px;
  left: 12px;
  border-radius: 0% 0% 50% 50%/0% 0% 100% 100%;
}
.horror-input-pumpkin-1 .horror-input-pumpkin-mouth::before, .horror-input-pumpkin-1 .horror-input-pumpkin-mouth::after {
  content: "";
  background-color: #fc8803;
  width: 8px;
  height: 6px;
  position: absolute;
}
.horror-input-pumpkin-1 .horror-input-pumpkin-mouth::before {
  top: 0;
  left: 4px;
}
.horror-input-pumpkin-1 .horror-input-pumpkin-mouth::after {
  bottom: 0;
  right: 4px;
}

.horror-input-pumpkin-2 {
  --w: 48px;
  --h: 32px;
  --x: 176px;
  --y: 40px;
  transform-origin: bottom left;
}
.horror-input-pumpkin-2 .horror-input-pumpkin-stem {
  --w: 6px;
  --h: 10px;
}
.horror-input-pumpkin-2 .horror-input-pumpkin-eye {
  background-color: #000000;
  width: 10px;
  height: 5px;
  position: absolute;
  top: 10px;
  border-radius: 0% 0% 50% 50%/0% 0% 100% 100%;
}
.horror-input-pumpkin-2 .horror-input-pumpkin-eye-left {
  left: 6px;
}
.horror-input-pumpkin-2 .horror-input-pumpkin-eye-right {
  left: 24px;
}
.horror-input-pumpkin-2 .horror-input-pumpkin-mouth {
  background-color: #000000;
  width: 20px;
  height: 8px;
  position: absolute;
  top: 18px;
  left: 10px;
  border-radius: 50% 50% 0% 0%/100% 100% 0% 0%;
}
.horror-input-pumpkin-2 .horror-input-pumpkin-mouth::before, .horror-input-pumpkin-2 .horror-input-pumpkin-mouth::after {
  content: "";
  background-color: #fc8803;
  width: 5px;
  height: 3px;
  position: absolute;
}
.horror-input-pumpkin-2 .horror-input-pumpkin-mouth::before {
  top: 0;
  left: 3px;
}
.horror-input-pumpkin-2 .horror-input-pumpkin-mouth::after {
  bottom: 0;
  right: 2px;
}

.horror-input-pumpkin-3 {
  --w: 32px;
  --h: 22px;
  --x: 264px;
  --y: 46px;
  transform-origin: bottom left;
}
.horror-input-pumpkin-3 .horror-input-pumpkin-stem {
  --w: 4px;
  --h: 8px;
}
.horror-input-pumpkin-3 .horror-input-pumpkin-eye {
  background-color: #000000;
  width: 8px;
  height: 4px;
  position: absolute;
  top: 6px;
  border-radius: 50% 50% 0% 0%/100% 100% 0% 0%;
}
.horror-input-pumpkin-3 .horror-input-pumpkin-eye-left {
  right: 2px;
}
.horror-input-pumpkin-3 .horror-input-pumpkin-eye-right {
  right: 14px;
}
.horror-input-pumpkin-3 .horror-input-pumpkin-mouth {
  background-color: #000000;
  width: 16px;
  height: 6px;
  position: absolute;
  top: 13px;
  left: 12px;
  border-radius: 0% 0% 50% 50%/0% 0% 100% 100%;
}
.horror-input-pumpkin-3 .horror-input-pumpkin-mouth::before, .horror-input-pumpkin-3 .horror-input-pumpkin-mouth::after {
  content: "";
  background-color: #fc8803;
  width: 3px;
  height: 2px;
  position: absolute;
}
.horror-input-pumpkin-3 .horror-input-pumpkin-mouth::before {
  top: 0;
  left: 3px;
}
.horror-input-pumpkin-3 .horror-input-pumpkin-mouth::after {
  bottom: 0;
  right: 4px;
}

.horror-input-grave-1 {
  --size: 48px;
  bottom: 0;
  transform: translateX(-32px) translateY(16px);
}
.horror-input-grave-1 .horror-input-grave-stone {
  --translate-y: 48px;
  background-color: #afafaf;
  background-image: linear-gradient(to right, transparent 0% 25%, rgba(0, 0, 0, 0.3) 90%);
  width: 32px;
  height: 36px;
  position: absolute;
  bottom: 0;
  left: 8px;
  filter: drop-shadow(3px 0 0 #5b5b5b);
  transform: translateY(var(--translate-y)) skewX(-7deg);
}
.horror-input-grave-1 .horror-input-grave-stone::before {
  content: "";
  background-color: #afafaf;
  background-image: linear-gradient(to right, transparent 0% 25%, rgba(0, 0, 0, 0.3) 90%);
  width: 20px;
  height: 12px;
  position: absolute;
  bottom: 100%;
  left: 6px;
  border-radius: 50% 50% 0 0/50% 50% 0 0;
}

.horror-input-grave-2 {
  --size: 48px;
  bottom: 0;
  transform: translateX(6px) translateY(26px);
}
.horror-input-grave-2 .horror-input-grave-stone {
  --translate-y: 48px;
  background-color: #afafaf;
  background-image: linear-gradient(to right, transparent 0% 25%, rgba(0, 0, 0, 0.3) 90%);
  width: 24px;
  height: 24px;
  position: absolute;
  bottom: 0;
  left: 12px;
  filter: drop-shadow(3px 0 0 #5b5b5b);
  transform: translateY(var(--translate-y)) skewX(8deg);
}
.horror-input-grave-2 .horror-input-grave-stone::before {
  content: "";
  background-color: #afafaf;
  background-image: linear-gradient(to right, transparent 0% 25%, rgba(0, 0, 0, 0.3) 90%);
  width: 16px;
  height: 12px;
  position: absolute;
  bottom: 100%;
  left: 4px;
  border-radius: 50% 50% 0 0/50% 50% 0 0;
}
.horror-input-grave-2 .horror-input-grave-stone::after {
  content: "";
  background-image: linear-gradient(to bottom, transparent 0px 4px, #afafaf 4px 8px, transparent 8px 12px), linear-gradient(to right, transparent 0px 4px, #afafaf 4px 8px, transparent 8px 12px);
  width: 12px;
  height: 12px;
  position: absolute;
  bottom: 36px;
  left: 6px;
}

.horror-input-spider {
  background-color: #000000;
  width: 32px;
  height: 32px;
  position: absolute;
  top: -138px;
  left: -45px;
  border-radius: 50%;
  pointer-events: none;
  transform: scale(0);
}
.horror-input-spider .horror-input-spider-leg {
  background-color: #000000;
  width: 32px;
  height: 4px;
  position: absolute;
  top: calc(50% - 2px);
  left: 50%;
  transform-origin: center left;
}
.horror-input-spider .horror-input-spider-leg:nth-child(1) {
  transform: rotate(19deg);
}
.horror-input-spider .horror-input-spider-leg:nth-child(2) {
  transform: rotate(46deg);
}
.horror-input-spider .horror-input-spider-leg:nth-child(3) {
  transform: rotate(-22deg);
}
.horror-input-spider .horror-input-spider-leg:nth-child(4) {
  transform: rotate(-3deg);
}
.horror-input-spider .horror-input-spider-leg:nth-child(5) {
  transform: rotate(206deg);
}
.horror-input-spider .horror-input-spider-leg:nth-child(6) {
  transform: rotate(217deg);
}
.horror-input-spider .horror-input-spider-leg:nth-child(7) {
  transform: rotate(159deg);
}
.horror-input-spider .horror-input-spider-leg:nth-child(8) {
  transform: rotate(190deg);
}

.horror-input-spider-web {
  background-color: #efefef;
  width: 2px;
  height: 0px;
  position: absolute;
  top: -122px;
  left: -31px;
}

.horror-input-bat-1 {
  background-color: #000000;
  width: 32px;
  height: 24px;
  position: absolute;
  top: -140px;
  left: 220px;
  border-radius: 50%/40%;
  pointer-events: none;
  transform: scale(0);
}
.horror-input-bat-1::before, .horror-input-bat-1::after {
  content: "";
  width: 0;
  height: 0;
  border: 0;
  border-left: solid 6px transparent;
  border-right: solid 6px transparent;
  border-bottom: solid 12px #000000;
  position: absolute;
  bottom: 100%;
}
.horror-input-bat-1::before {
  transform-origin: bottom right;
  transform: rotate(-25deg);
}
.horror-input-bat-1::after {
  right: 0;
  transform-origin: bottom left;
  transform: rotate(25deg);
}
.horror-input-bat-1 .horror-input-bat-left-wing,
.horror-input-bat-1 .horror-input-bat-right-wing {
  width: 0;
  height: 0;
  border: 0;
  border-left: solid 48px transparent;
  border-right: solid 48px transparent;
  border-bottom: solid 12px #000000;
  position: absolute;
  top: -2px;
}
.horror-input-bat-1 .horror-input-bat-left-wing::after,
.horror-input-bat-1 .horror-input-bat-right-wing::after {
  content: "";
  background-image: radial-gradient(circle at center, transparent 0px 8px, #000000 8px 16px);
  background-size: 16px 16px;
  width: 96px;
  height: 8px;
  position: absolute;
  top: 12px;
  left: -48px;
}
.horror-input-bat-1 .horror-input-bat-left-wing {
  right: calc(100% - 4px);
  transform-origin: bottom right;
  transform: rotate(-25deg);
}
.horror-input-bat-1 .horror-input-bat-right-wing {
  left: calc(100% - 4px);
  transform-origin: bottom left;
  transform: rotate(25deg);
}

.horror-input-bat-2 {
  background-color: #000000;
  width: 24px;
  height: 16px;
  position: absolute;
  top: 32px;
  left: 292px;
  border-radius: 50%/40%;
  pointer-events: none;
  transform: scale(0);
}
.horror-input-bat-2::before, .horror-input-bat-2::after {
  content: "";
  width: 0;
  height: 0;
  border: 0;
  border-left: solid 4px transparent;
  border-right: solid 4px transparent;
  border-bottom: solid 12px #000000;
  position: absolute;
  bottom: 100%;
}
.horror-input-bat-2::before {
  transform-origin: bottom right;
  transform: rotate(-25deg);
}
.horror-input-bat-2::after {
  right: 0;
  transform-origin: bottom left;
  transform: rotate(25deg);
}
.horror-input-bat-2 .horror-input-bat-left-wing,
.horror-input-bat-2 .horror-input-bat-right-wing {
  width: 0;
  height: 0;
  border: 0;
  border-left: solid 32px transparent;
  border-right: solid 32px transparent;
  border-bottom: solid 10px #000000;
  position: absolute;
  top: -2px;
}
.horror-input-bat-2 .horror-input-bat-left-wing::after,
.horror-input-bat-2 .horror-input-bat-right-wing::after {
  content: "";
  background-image: radial-gradient(circle at center, transparent 0px 8px, #000000 8px 16px);
  background-size: 16px 16px;
  width: 64px;
  height: 8px;
  position: absolute;
  top: 10px;
  left: -32px;
}
.horror-input-bat-2 .horror-input-bat-left-wing {
  right: calc(100% - 4px);
  transform-origin: bottom right;
  transform: rotate(25deg);
}
.horror-input-bat-2 .horror-input-bat-right-wing {
  left: calc(100% - 4px);
  transform-origin: bottom left;
  transform: rotate(-25deg);
}

.horror-input-bat-3 {
  background-color: #000000;
  width: 16px;
  height: 12px;
  position: absolute;
  top: -104px;
  left: 6px;
  border-radius: 50%/40%;
  pointer-events: none;
  transform: scale(0);
}
.horror-input-bat-3::before, .horror-input-bat-3::after {
  content: "";
  width: 0;
  height: 0;
  border: 0;
  border-left: solid 2px transparent;
  border-right: solid 2px transparent;
  border-bottom: solid 8px #000000;
  position: absolute;
  bottom: 100%;
}
.horror-input-bat-3::before {
  transform-origin: bottom right;
  transform: rotate(-25deg);
}
.horror-input-bat-3::after {
  right: 0;
  transform-origin: bottom left;
  transform: rotate(25deg);
}
.horror-input-bat-3 .horror-input-bat-left-wing,
.horror-input-bat-3 .horror-input-bat-right-wing {
  width: 0;
  height: 0;
  border: 0;
  border-left: solid 24px transparent;
  border-right: solid 24px transparent;
  border-bottom: solid 8px #000000;
  position: absolute;
  top: -2px;
}
.horror-input-bat-3 .horror-input-bat-left-wing::after,
.horror-input-bat-3 .horror-input-bat-right-wing::after {
.........完整代码请登录后点击上方下载按钮下载查看