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>