HTML/CSS中的文本悬停动画

Question

我有以下代码：

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

问题是您使用的是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值中删除comas。

Answer 2

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

注意：您的框阴影值无效。我纠正了它们，但看看这个：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 3

您的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 4

HTML中没有名称为<z>的元素，你不应该把,放在最后一行，所以HTML中正确的代码应该是Lik 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);
}

或者，您应该在CSS代码中为p标记添加结束标记并删除,，然后将其替换为;。所以你的代码可能是这样的：

<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);
}