我在谷歌中进行了大量搜索,以找到一种在 JavaScript 的帮助下为我的 HTML 网站上的文本添加动画效果的方法。 所以我的想法是,当有人打开我的网站时,我想缩放文本元素以创建弹出效果,以可视化该文本与鼠标交互(可点击、可更改,等等...)。
你知道是否存在可以以这种方式为我的文本设置动画的函数吗?我只想展示一次这种效果,所以我不想重复。这是我要制作动画的文本:
<p class="info-text">Das ist mein Text welcher einen Pop-out effect benötigt</p>
解决方案
非常感谢尼基塔!这是工作解决方案:
.my-text {
animation: pop 0.4s ease-in-out;
animation-delay: 1s;
}
@keyframes pop {
50% {
transform: scale(1.25);
}
}
<p class="my-text">Hello everyone :)</p>
最佳答案
如果您想在页面加载时恰好弹出动画,只需为带有文本的元素添加一个类。并在 CSS 中编写所需的动画。并且在页面加载后,弹出动画将播放并播放一次。
<div class="pop"></div>
<div class="pop with-delay"></div>
并添加样式(如果你想添加一些延迟,在 css/styles 中添加“animation-delay”):
.pop{
animation: pop 0.25s ease-in-out;
}
.with-delay {
animation-delay: 1s;
}
@keyframes pop{
50% {
transform: scale(1.25);
}
}
关于javascript - 如何在 JavaScript 中制作具有效果的文本 "pop out",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53366654/