如何在 JavaScript 中制作具有效果的文本"pop out"



我在谷歌上搜索了很多,想找到一种在JavaScript的帮助下在HTML网站上动画化文本的方法。所以我的想法是,当有人打开我的网站时,我想缩放一个文本元素,以创建一个弹出效果,可视化这个文本是与鼠标交互的(可点击、可更改、任何…(

你知道是否有一个函数可以用这种方式动画我的文本吗?我只想展示一次这个效果,所以我不想重复。这是我想动画的文本:

<p class="info-text">Das ist mein Text welcher einen Pop-out effect benötigt</p>

解决方案
非常感谢Nikita!这是有效的解决方案:

.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中添加"动画延迟"(:

.pop{
animation: pop 0.25s ease-in-out;
}
.with-delay {
animation-delay: 1s;
}
@keyframes pop{
50%  {
transform: scale(1.25);
}
}

以下是示例:https://codepen.io/anon/pen/jQGBdm

它被称为onload方法:你可以做一些基本的东西,比如这个

<!DOCTYPE html>
<html>
<body onload="myFunction()">
<h1 id="title">Hello World!</h1>
<script>
function myFunction() {
alert("Page is loaded");
//example
document.getElementById("title").style.color = "blue";
}
</script>
</body>
</html>

或者你可以使用jquery

$( document ).ready(function() {
//change the css
});

这是最基本的方式,但下次你需要展示你以前尝试过的东西的例子,当你问一个问题

相关内容

最新更新