如何在JavaScript中使用效果使文本“弹出”

Question

I've searched a lot in google to find a way to animate a text on my HTML site with the help of JavaScript. 我在Google中进行了大量搜索，以找到一种在JavaScript的帮助下对HTML网站上的文本进行动画处理的方法。 So my idea is when someone opens my website I want to zoom a text element to create a pop out effect to visualize that this text is interactive with the mouse (Clickable, changeable, whatever...). 所以我的想法是，当有人打开我的网站时，我想缩放一个文本元素以创建弹出效果，以可视化该文本与鼠标是可交互的（可单击，可更改等）。

Do you know if there exists a function which can animate my text this way? 您是否知道是否可以使用这种方式为我的文本设置动画？ I just want to show this effect once so I don't want to repeat it. 我只想显示一次这种效果，所以我不想重复。 This is the text I want to animate: 这是我要设置动画的文本：

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

Solution 解
Big thanks to Nikita! 非常感谢Nikita！ This is the working solution: 这是可行的解决方案：

 .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>

Answer 1

If you want to pop animation exactly when page loads, just add a class for the element with text. 如果要在页面加载时完全弹出动画，只需为带有文本的元素添加一个类。 And in CSS write needed animation. 并在CSS中编写所需的动画。 And after the page loads, the popup animation will play and play once. 在页面加载后，弹出动画将播放一次并播放一次。

<div class="pop"></div>
<div class="pop with-delay"></div>

and add styles (if you want to add some delay, in css/styles add "animation-delay"): 并添加样式（如果要添加一些延迟，请在CSS /样式中添加“动画延迟”）：

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

Here's example: https://codepen.io/anon/pen/jQGBdm 例如： https : //codepen.io/anon/pen/jQGBdm

Answer 2

it is called onload method : you cando something basic like this 它被称为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>

or you can use jquery 或者你可以使用jQuery

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

this is the basic way, but next time you need to show examples of things that you've tried before when you ask a question 这是基本的方法，但是下次您需要显示在询问问题之前尝试过的事情的示例

如何在JavaScript中使用效果使文本“弹出”

问题描述

2 个解决方案

解决方案1
2 已采纳 2018-11-19 00:31:43

解决方案2
1 2018-11-19 00:32:51

如何在JavaScript中使用效果使文本“弹出”

问题描述

2 个解决方案

解决方案1 2 已采纳 2018-11-19 00:31:43

解决方案2 1 2018-11-19 00:32:51

解决方案1
2 已采纳 2018-11-19 00:31:43

解决方案2
1 2018-11-19 00:32:51