How to zoom on text on hover using scss and html

Question

我是 html 的新手，我对目前的悬停效果很好奇。我希望悬停时的文本在 0.2 秒内放大 1.5。它什么也没做。这可能是 scss 标题的问题。

我写了这个..

<section class="hero">
        <div class="wrd-content">
            <h2>Hello... I am</h2>
            <h1>FirstName<br>LastName</h1>
            <hr></hr>
        </div>
</section>

和

section.hero .wrd-content:hover
    {
        transform: scale(1.5);
        transition: transform 0.2s;
    }

我只是有点迷失在我出错的地方。

Answer 1

您可能想要添加 transform-origin 属性以确保文本从其中心点而不是左上角开始缩放

section.hero .wrd-content:hover {
  transform: scale(1.5);
  transform-origin: center;
  transition: transform 0.2s;
}

<section class="hero">
        <div class="wrd-content">
            <h2>Hello... I am</h2>
            <h1>FirstName<br>LastName</h1>
            <hr></hr>
        </div>
</section>

Answer 2

我试过你的代码，它对我有用。 您确定在 HTML 文件中正确包含 CSS 了吗？ 所以：

<link rel="stylesheet" href="PathToYourCSS.css">

然后您必须将其插入 HTML 文件的标题区域。 我希望我能帮助你，祝你成功和快乐。