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

Question

我正在寻找一个网页上的大圆圈，它在60秒内逐渐变小，然后触发一些文本，然后在HTML中再次变大，但可惜我的HTML不是很好好。

我意识到我可以使用循环，并使每个循环的形状更小，但如果我这样做，我该如何让循环运行正好60秒？

如果任何人都可以指出我在正确的方向，我将非常感激。

Answer 1

由于无法使用纯Html完成，因此您必须使用javascript。

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

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>