如何在 CSS 中转换标题和标题

Question

我想知道为什么我的代码没有转换 in 和 out，但我找不到答案。我确信与其他代码工作效果相比存在一些错误，但对我来说很难找到。这是我的第一个 post 很抱歉 "stupid question"

h1 {
  font-size: 40px;
  text-align: center;
  color: crimson;
  margin: 0 10% 20px 10%;
  padding-bottom: 15px;
  border-bottom: 2px solid crimson;
}

h1:hover {
  font-size: 45px;
  transition: 0.3s;
}

<h1>Simple Text</h1>

Answer 1

我认为你正在努力实现这样的目标。

最初在 h1 上而不是仅在 :hover 上应用该转换。

     h1 {
            font-size: 40px;
            text-align: center;
            color: crimson;
            margin: 0 10% 20px 10%;
            padding-bottom: 15px;
            border-bottom: 2px solid crimson;
            transition: 0.3s;
        }

        h1:hover {
            font-size: 45px;
        }

<h1>Simple Text</h1>

Answer 2

一切正确，但您只需要将过渡放在 h1 而不是 h1:hover。

所以你们把它改成这样，它应该可以工作：

h1 {font-size: 40px;text-align: center;color: crimson;margin:0 10% 20px 10%;padding-bottom: 15px;border-bottom: 2px solid crimson; transition: 0.3s;}
h1:hover {font-size: 45px;}

如何在 CSS 中转换标题和标题

How to make transition in and out of headline in CSS

css

css-transitions