Question

我希望在网页上有一个大圆圈，在60秒内逐渐变小，然后触发一些文字，然后再次在HTML中变大，但遗憾的是我的HTML不是很好。

我意识到我可以使用一个循环，并使每个循环的形状变小但是如果我这样做，我怎么能让循环运行正好60秒？

如果有人能指出我正确的方向，我将非常感激。

Answer 1

您必须使用javascript，因为无法使用纯Html。

您可以使用javascript中的setInterval函数每1秒运行一个函数，并在该函数中执行任何操作。以下示例。

mainFunction(){
  setInterval(doSomething, 1000); //here 1000 means 1000ms ie it will run every 1s
}

doSomething(){
   //here you can change the radius of your circle to make it grow bigger/smaller every 1s
}

Answer 2

如果您对此不太了解，使用jQuery就是答案。它具有制作动画的功能，就像你想要制作动画一样。 In this page你会找到所需的一切，但我会在这里放一个片段，让你在几分钟内看到你能做些什么：

var x = 10;
$("#try").on('click', function(){
  x = 10;
  animate1();
});

function animate1(){
  console.log(x);
  if (x > 0){
  x = x - 1;
  $("#text").html("Small text");
  $("#text").animate({fontSize: '40'}, 1000, "swing", animate2);
  
  }
};
function animate2(){
  if (x > 0){
  x = x - 1;
  $("#text").html("Big text");
  $("#text").animate({fontSize: '10'}, 1000, "swing", animate1);
  
  }
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="text">Small text</div>
<br>
<button id="try">Try this!</button>

HTML圈图像在1分钟内逐渐变小

2 个答案: