我对css很陌生,在一个朋友的网站上做一些动画。尽管我似乎遇到了一个问题。
以下动画是文本字段上的反弹效果:
.text {
animation: text-pop-up-top 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite alternate both;
}
@keyframes text-pop-up-top {
0% {
transform: translateY(0);
transform-origin: 50% 50%;
text-shadow: none;
}
100% {
transform: translateY(-50px);
transform-origin: 50% 50%;
text-shadow: 0 1px 0 #cccccc, 0 2px 0 #cccccc, 0 3px 0 #cccccc, 0 4px 0 #cccccc, 0 5px 0 #cccccc, 0 6px 0 #cccccc, 0 7px 0 #cccccc, 0 8px 0 #cccccc, 0 9px 0 #cccccc, 0 50px 30px rgba(0, 0, 0, 0.3);
}
}
但文本反弹得太高,并且与其他文本重叠。是否可以设置高度,使其只上升到设置高度的一半?我很抱歉,如果这是一个简单的解决办法,我还没有弄清楚。我真的很感激你的帮助。
最佳答案
要调整的行是:
transform: translateY(-50px);
尝试将其调整为:
transform: translateY(-25px);
更新
您可能还需要调整
text-shadow
的最后一部分,以减小阴影的垂直距离,使其与降低的translateY
值保持一致。更改此:
text-shadow: … 0 50px 30px rgba(0, 0, 0, 0.3);
/* ^^ */
对此:
text-shadow: … 0 25px 30px rgba(0, 0, 0, 0.3);
/* ^^ */
jsFiddle