在 CSS 和 HTML 中对文本创建效果

Question

如何创建这样的文字效果？ https://i.imgur.com/bkHVFhB.png

我尝试了跨度等不同的东西，但我得到的最好结果是这个：https://i.imgur.com/cl03qTR.png。

有人可以帮我从 0 重新创建这个效果吗？如果需要，我有合适的字体：Poppins without-serif

Answer 1

我将 h1 设为 inline-flex 容器，将其子项指向柱状方向。 h1 中的每个 span 都是一个 flex 子项，将占据自己的行。

h1 {
  display: inline-flex;
  flex-direction: column;
}

h1 span {
  color: #f5f5f5;
}

.highlight {
  background-color: #f5f5f5;
  color: #221616;
}

body {
  font-family: Poppins,sans-serif;
  font-size: 20px;
  background: #26372b;
  background: linear-gradient(315deg,#1c271f,#221616);
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 100vh;
  width: 100vw; 
  text-transform: uppercase;
}

<div class="branding">
  <h1>
    <span>The future of</span>
    <span class="highlight">your discord bot</span>
    <span>is on the way !</span>
  </h1>
</div>

在 CSS 和 HTML 中对文本创建效果

Create an effect on a text in CSS and HTML

html

css

text

fonts