使用CSS Padding悬停过渡效果时出现闪烁文字问题

Question

我甚至不确定这是否可能！

我正在尝试动画化围绕着居中文本链接的填充量。当您单击文本链接时，填充会从20％更改为100％ - 这一点有效 :)

使用CSS使文本居中。

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

我正在使用过渡属性来动画化填充位。

transition-property: padding;
transition-duration: .5s;
transition-timing-function: ease-in-out;

如果代码有点笨重，我很抱歉 - 这是我在这里使用的完整代码：

#homePanel {
  width: 300px;
  height: 300px;
  position: relative;
  overflow: hidden;
}

#homePanel img {
  width: 100%;
  filter: grayscale(1%);
  transition-property: opacity;
  transition-duration: .4s;
  transition-timing-function: ease-in-out;
  height: auto;
}

#panelLink h3 a {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 2px;
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.6);
  padding: 20%;
  transition-property: padding;
  transition-duration: .5s;
  transition-timing-function: ease-in-out;
}

#panelLink h3 a {
  color: #fff;
  text-decoration: none;
}

#panelLink h3 a:hover {
  color: #fff;
  padding: 100%;
}

<div id="homePanel">
  <div id="panelLink">
    <a href="https://www.google.co.uk/"><img src="https://www.landscapia.co.uk/wp-content/uploads/2022/03/landscapia-design.jpg" alt="Landscapia Design" width="600" height="600" class="img-responsive" /></a>
    <h3><a href="https://www.google.co.uk/">Design</a></h3>
  </div>
</div>

我遇到的问题是当我悬停在链接上时，文本链接会晃动/闪烁。我猜测这是因为CSS也在尝试重新调整文本以适应额外的填充，这导致了悬停时的闪烁。

我还在其中包括了一个 CodePen 链接，展示了代码的效果 - https://codepen.io/rolandxp30/pen/oNqZoom 我想不到其他方法了吗？有没有一种稳定或居中文本的方法或者实现相同动画效果的另一种方法？

先感谢您的帮助，

诚挚问候,

Brian

- Brian

---

我会在链接上使用绝对定位的伪元素作为背景，然后在悬停时简单地应用 transform: scale(5)。 - CBroe

嗨，杰拉德，抱歉问这个愚蠢的问题，什么是绝对定位的伪元素？-我已经谷歌过了，但我还是一无所知:( 这是替换当前-position: absolute; top: 50%; left: 50%; transform: translate(-50%，-50%);位吗？理想情况下，我需要这个自动调整不同分辨率，例如百分比，而不是特定的金额-如果有意义的话？-或者这不可能吗？我尝试了transform: scale位，似乎可以作为padding的替代方案。 - Brian

抱歉，谢谢你的回复！ :) - Brian

Answer 1

我会在链接上使用绝对定位的伪元素作为背景，然后只需在悬停时应用transform: scale(...)即可。

什么是绝对定位的伪元素？

一个伪元素，被绝对定位了；-）

将其定位在top/right/bottom/left 0处，使其具有父元素的尺寸。悬停时，它会简单地放大。我在这里使用了3倍的因子，这似乎已经足够了。你不想在这里走得太高，否则当你取消悬停元素时，你将看到它缩小的明显延迟。

#homePanel {
  width: 300px;
  height: 300px;
  position: relative;
  overflow: hidden;
}

#homePanel img {
  width: 100%;
  filter: grayscale(1%);
  transition-property: opacity;
  transition-duration: .4s;
  transition-timing-function: ease-in-out;
  height: auto;
}

#panelLink h3 a {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 2px;
  color: #ffffff;
  padding: 20%;
}

#panelLink h3 a {
  color: #fff;
  text-decoration: none;
}

#panelLink h3 a::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background-color: rgba(0, 0, 0, 0.6);
  transition-property: transform;
  transition-duration: .5s;
  transition-timing-function: ease-in-out;
}

#panelLink h3 a:hover::after {
  transform: scale(3);
}

<div id="homePanel">
  <div id="panelLink">
    <a href="https://www.google.co.uk/"><img src="https://www.landscapia.co.uk/wp-content/uploads/2022/03/landscapia-design.jpg" alt="Landscapia Design" width="600" height="600" class="img-responsive" /></a>
    <h3><a href="https://www.google.co.uk/">Design</a></h3>
  </div>
</div>

- CBroe

---

太棒了！非常感谢你的帮助！ :)祝好，Brian - Brian

Answer 2

试试这个，可能会有用！

我刚刚因为填充的原因在 a 标签外面添加了一个设计标签。（注意：如果需要使用锚点标签，请根据您的要求进行额外更改。）

这是 HTML 代码。

<div id="homePanel">
<div id="panelLink">
<a href="https://www.google.co.uk/"><img 
 src="https://www.landscapia.co.uk/wp- 
 content/uploads/2022/03/landscapia-design.jpg" alt="Landscapia Design" 
 width="600" height="600" class="img-responsive" /></a>
<h3><span>Design</span><a href="https://www.google.co.uk/"></a></h3>
</div>

这是 CSS 代码：

#homePanel {
 width: 300px;
 height: 300px;
 position: relative;
 overflow:hidden;
}

#homePanel img {
 width: 100%;
 filter: grayscale(1%);
 transition-property: opacity;
 transition-duration: .4s;
 transition-timing-function: ease-in-out;
 height: auto;
} 

#panelLink h3 span {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 font-weight: bold;
 text-transform: uppercase;
 letter-spacing: 2px;
 color: #ffffff;
 z-index: 1;
}

#panelLink h3 a {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 font-weight: bold;
 text-transform: uppercase;
 letter-spacing: 2px;
 color: #ffffff;
 background-color: rgba(0, 0, 0, 0.6);
 padding: 20%;
 transition-property: padding;
 transition-duration: .5s;
 transition-timing-function: ease-in-out;
}

#panelLink h3 a {
 text-decoration: none;
}

#panelLink h3 a:hover {
 padding: 100%;
}

- Priyen Mehta