万圣节怪物字体

下载代码

html

css

分享到微信朋友圈

html

<div class="container">
  <div class="bats">
    <svg id="bat-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15000 15000">
      <path id="bat-1" d="M2035 25a684 684 0 0 1-504 501l-68-228-73 77c-24-21-126-21-150 0l-73-77-68 228A686 686 0 0 1 595 25 675 675 0 0 1 35 280c156 16 307 116 306 268 91-26 194-36 274 13 86 52 125 161 128 260 220-155 413 92 510 337 4-17 16-76 62-139 38 51 51 96 62 139 98-248 291-491 510-337 7-212 139-348 402-273-1-154 153-252 306-268-246 2-433-96-560-255z"></path>
      <use href="#bat-1" id="bat-2"></use>
      <use href="#bat-1" id="bat-3"></use>
      <use href="#bat-1" id="bat-4"></use>
      <use href="#bat-1" id="bat-5"></use>
      <use href="#bat-1" id="bat-6"></use>
      <use href="#bat-1" id="bat-7"></use>
    </svg>
  </div>
  <div class="sky">
    <div class="title">happy</div>
    <div class="title orange">HALLOWEEN</div>
    <div class="dropdown">
      <label for="monster-select">Choose One:</label>
      <select id="monster-select" name="monster" onchange="this.dataset.highlighted = this.value;">
        <option value=""></option>
        <option value="Ghost">Ghost</option>
        <option value="Ghoul">Ghoul</option>
        <option value="Marshmallow Monster">Marshmallow Monster</option>
        <option value="Vampire">Vampire</option>
        <option value="Werewolf">Werewolf</option>
        <option value="Skeleton">Skeleton</option>
      </select>
    </div>
  </div>
  <div class="ground">
    <div class="ground__wave">
      <svg id="wave-svg" viewBox="0 0 500 150" preserveAspectRatio="none">
        <path id="wave" d="M-0.84,61.69 C194.41,19.25 199.48,122.88 500.27,79.45 L500.00,150.00 L0.00,150.00 Z"></path>
        <text id="ground__group">
          <textpath id="ground__text" href="#wave" text-anchor="middle" startOffset="22.5%"></textpath>
        </text>
      </svg>
    </div>
  </div>
</div>

css

@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@800&family=Gamja+Flower&family=Lakki+Reddy&family=Nosifer&family=Rock+Salt&family=Sniglet:wght@800&family=Sue+Ellen+Francisco&family=Walter+Turncoat&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
* ::-moz-selection {
  color: #f09328;
}
* ::selection {
  color: #f09328;
}

body {
  height: 100vh;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: space-between;
  background: radial-gradient(circle at 50% 70%, white 0, white 10rem, #632c90 10.1rem, #632c90 20rem, #532881 20.1rem, #532881 30rem, #3d2673 30.1rem, #3d2673 40rem, #272163 40.1rem) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  font-family: "Lakki Reddy", cursive;
  font-size: 2rem;
  line-height: 3.5rem;
  color: #f0f7ff;
  text-align: center;
}
body a {
  color: inherit;
  text-decoration: none;
}

.container {
  position: relative;
  height: 100%;
  max-width: 58.125rem;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: space-between;
}

.bats {
  position: fixed;
  width: 58.125rem;
  height: 100%;
  fill: transparent;
}
.bats #bat-2 {
  fill: #022136;
  transform-origin: 50% 50%;
}
.bats #bat-3 {
  fill: #022136;
  transform-origin: 50% 50%;
}
.bats #bat-4 {
  fill: #022136;
  transform-origin: 50% 50%;
}
.bats #bat-5 {
  fill: #022136;
  transform-origin: 50% 50%;
}
.bats #bat-6 {
  fill: #022136;
  transform-origin: 50% 50%;
}
.bats #bat-7 {
  fill: #022136;
  transform-origin: 50% 50%;
}
.bats #bat-2 {
  x: 10%;
  y: 10%;
  transform: rotate(-10deg) scale(0.45);
  filter: opacity(0.75);
}
.bats #bat-3 {
  x: 30%;
  y: 30%;
  transform: rotate(10deg) scale(0.35);
  filter: opacity(0.55);
}
.bats #bat-4 {
  x: 90%;
  y: -10%;
  transform: rotate(-20deg) scale(0.55);
  filter: opacity(0.95);
}
.bats #bat-5 {
  x: 70%;
  y: 5%;
  transform: rotate(20deg) scale(0.45);
  filter: opacity(0.75);
}
.bats #bat-6 {
  x: 0%;
  y: 55%;
  transform: rotate(20deg) scale(0.25);
  filter: opacity(0.35);
}
.bats #bat-7 {
  x: 60%;
  y: 60%;
  transform: rotate(-20deg) scale(0.25);
  filter: opacity(0.15);
}

.sky {
  position: absolute;
  top: 10%;
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  justify-content: center;
}
.sky .title.orange {
  color: #f09328;
  font-size: 4rem;
  line-height: 4rem;
}

.ground {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  height: 100%;
}
.ground__wave {
  fill: #022136;
  font-size: 4.5rem;
}
.ground__wave svg {
  width: 100vw;
  height: 100%;
  overflow: visible;
}
.ground #ground__group {
  transform-origin: 50% 50%;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
  animation: ghost 5s infinite linear alternate;
}
@keyframes ghost {
  0% {
    transform: translate(0, -30%);
    filter: blur(0.5rem);
    opacity: 0;
  }
  100% {
    transform: translate(0, -10%);
    opacity: 0.2;
  }
}
@keyframes ghoul {
  0% {
    transform: translate(0, 70%) rotate(25deg);
  }
  70% {
    transform: translate(0, 0);
  }
}
@keyframes marshmallow {
  0% {
    transform: translateY(-5%) skewX(5deg) scale(1.02);
  }
  50% {
    transform: translateY(-5.5%) skewX(-5deg) scale(0.98);
  }
}
@keyframes vampire {
  0% {
    transform: translate(0, -20%);
  }
  100% {
    transform: translate(0, -40%);
  }
}
@keyframes werewolf {
  50% {
    text-shadow: 0 0.025em 0.01em #022136, 0.025em -0.025em 0.01em #022136, 0.025em 0 0.01em #022136, -0.025em 0.025em 0.01em #022136;
  }
}
@keyframes skeleton {
  20% {
    transform: translate3d(-1px, -1px, 0);
  }
  80% {
    transform: translate3d(1px, 0, 1px);
  }
}

.dropdown {
  display: flex;
  flex-flow: column nowrap;
  font-family: "Gamja Flower", cursive;
  color: #f09328;
  text-shadow: 0 1px #532881;
}
.dropdown #monster-select {
  width: 10rem;
  height: 3rem;
  border: 0.5rem solid #632c90;
  font-family: "Gamja Flower", cursive;
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.5);
  padding: 0.25rem;
  background: #532881;
  border-radius: 0.3rem;
}

@media (max-height: 400px) {
  body {
    background: radial-gradient(circle at 50% 70%, white 0, white 5rem, #632c90 5.1rem, #632c90 10rem, #532881 10.1rem, #532881 15rem, #3d2673 15.1rem, #3d2673 20rem, #272163 20.1rem) no-repeat center center fixed;
  }

.container {
    transform: scale(0.5);
  }
  .container .sky {
    margin-top: -12%;
  }

.ground__wave svg {
    margin-bottom: -25%;
    width: 200vw;
    height: 200vh;
  }
}

JavaScript

const selectMonster = document.querySelector("#monster-select");
const groundText = document.querySelector("#ground__text");
const groundGroup = document.querySelector("#ground__group");
const groundWave = document.querySelector(".ground__wave");

const monsterBkgd = {
	ghost: "#FF7B00",
	ghoul: "#096B00",
	"marshmallow monster": "#009DFF",
	vampire: "#c1121f",
	werewolf: "#FF3700",
	skeleton: "#8F8F8F"
};

selectMonster.addEventListener("change", (e) => {
	groundText.textContent = `${e.target.value}`;

//update background based on current option
	const lowercase = e.target.value.toLowerCase();

const colors = (monsterColors) => {
		for (let color in monsterColors) {
			if (color === lowercase) {
				document.body.style.background = `radial-gradient(circle at 50% 100%, ${monsterColors[color]} 0, ${monsterColors[color]} .25rem,transparent), radial-gradient(circle at 50% 70%, white 0, white 10rem, #632c90 10.1rem, #632c90 20rem, #532881 20.1rem, #532881 30rem, #3d2673 30.1rem, #3d2673 40rem, #272163 40.1rem) no-repeat center center fixed`;
			}
		}
	};

colors(monsterBkgd);

if (e.target.value === "Ghost") {
		ghost();
	} else if (e.target.value === "Ghoul") {
		ghoul();
	} else if (e.target.value === "Marshmallow Monster") {
		marshmallow();
	} else if (e.target.value === "Vampire") {
		vampire();
	} else if (e.target.value === "Werewolf") {
		werewolf();
	} else if (e.target.value === "Skeleton") {
		skeleton();
	}
});

const ghost = () => {
	groundText.style.fontFamily = "Walter Turncoat";
	groundWave.style.fontSize = "4.25rem";
	groundGroup.style.animationName = "ghost";
	groundGroup.style.animationDuration = "4s";
};

const ghoul = () => {
	groundText.style.fontFamily = "Rock Salt";
	groundWave.style.fontSize = "4.25rem";
	groundGroup.style.animationName = "ghoul";
	groundGroup.style.animationDuration = "4s";
};

const marshmallow = () => {
	groundText.style.fontFamily = "Sniglet";
	groundGroup.style.animationName = "marshmallow";
	groundWave.style.fontSize = "2.25rem";
	groundGroup.style.animationDuration = "4s";
};

const vampire = () => {
	groundText.style.fontFamily = "Nosifer";
	groundGroup.style.animationName = "vampire";
	groundGroup.style.animationDuration = "6s";
};

const werewolf = () => {
	groundText.style.fontFamily = "Cinzel";
	groundGroup.style.animationName = "werewolf";
	groundGroup.style.animationDuration = "4s";
};

const skeleton = () => {
	groundText.style.fontFamily = "Sue Ellen Francisco";
	groundWave.style.fontSize = "4.25rem";
	groundGroup.style.animationName = "skeleton";
	groundGroup.style.animationDuration = ".5s";
};

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg