我在谷歌上搜索了很多,想找到一种在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
});
这是最基本的方式,但下次你需要展示你以前尝试过的东西的例子,当你问一个问题