HTML/CSS 中的文本悬停动画 [重复]

Question

这个问题在这里已经有了答案：

CSS 转换不适用于内联元素(2 个回答)

只在 css 中转换转换？ (4 个回答)

4 天前关闭。

我有以下代码：

 z { color: #0563bb; } z:hover { transform: translate(0, -7px); box-shadow: 0px, 32px, 25px, -8px rgba(0, 0, 0, .2), }

 <p>Hi there <z>This is the text that needs the hover animation</z>

为什么动画似乎不起作用？ 是因为它的文字还是我做错了什么？

Answer 1

它只需要一个块样式的显示，如display:inline-block; 此外，我在元素上添加了一个过渡以制作一些动画。

注意：您的 box-shadow 值无效。 我纠正了他们，但看看这个： https : //developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

感谢@evolutionxbox 的指导和额外的眼睛

 z { color: #0563bb; display:inline-block; transition: transform .3s; } z:hover { transform: translate(0, -7px); box-shadow: 0px 32px 25px 8px rgba(0, 0, 0, .2); }

 <p>Hi there <z>This is the text that needs the hover animation</z></p>

Answer 2

您的box-shadow属性值无效。 去掉逗号：

 z { color: #0563bb; display:inline-block; } z:hover { transform: translate(0, -7px); box-shadow: 0px 32px 25px -8px rgba(0, 0, 0) /* percentage removed for demonstration */ }

 <p>Hi there <z>This is the text that needs the hover animation</z>

如果您想使更改“动画化”，只需指定转换持续时间：

 z { color: #0563bb; display:inline-block; transition:0.5s; } z:hover { transform: translate(0, -7px); box-shadow: 0px 32px 25px -8px rgba(0, 0, 0) /* percentage removed for demonstration */ }

 <p>Hi there <z>This is the text that needs the hover animation</z>

Answer 3

问题是您使用的是transform而不是transition 。 这样文本就可以在没有动画的情况下跳转到下一个状态。 这应该可以解决您的问题：

 z { color: #0563bb; display:inline-block; trasform: translate(0, 0); transition: all 0.8s linear; } z:hover { transform: translate(0, -7px); box-shadow: 0px 32px 25px -8px rgba(0, 0, 0, .2); transition: all 0.8s linear; }

 <p>Hi there <z>This is the text that needs the hover animation</z></p>

您还应该从box-shadow值box-shadow删除逗号。

Answer 4

没有任何元素都名<z>在HTML，你不应该把,在最后一行，以便正确的代码在HTML MEY是沥eThis：

<p>Hi there <div class="z">This is the text that needs the hover animation</div></p>

和 CSS 像这样：

.z {
  color: red;
  display: inline-block;
 }

.z:hover {
  transform: translate(0, -7px);
  box-shadow: 0px, 32px, 25px, -8px rgba(0, 0, 0, .2);
}

或者，您应该添加闭标记为p标签和删除,在CSS代码，取而代之的是; . 所以你的代码我是这样的：

<p>Hi there <z>This is the text that needs the hover animation<z></p>

和 CSS 像这样：

z {
  color: red;
  display: inline-block;
 }

z:hover {
  transform: translate(0, -7px);
  box-shadow: 0px, 32px, 25px, -8px rgba(0, 0, 0, .2);
}