HTML-Kreis Bild allmählich kleiner über 1 Minute

Question

Ich bin auf der Suche nach einem großen Kreis auf einer Webseite, die allmählich über 60 Sekunden kleiner wird, löst dann einige Text und wird dann wieder größer in HTML, obwohl leider mein HTML ist nicht sehr gut.

Ich weiß, ich könnte eine Schleife dafür verwenden und die Form jeder Schleife kleiner machen, aber wenn ich es so mache, wie kann ich die Schleife für genau 60 Sekunden laufen lassen?

Wenn mir jemand in die richtige Richtung zeigen kann, wäre ich sehr, sehr dankbar.

Answer 1

Sie müssen Javascript verwenden, da es nicht mit reinem HTML gemacht werden kann.

Sie können die setInterval-Funktion in Javascript verwenden, um eine Funktion alle 1s auszuführen und alles in dieser Funktion zu tun. Beispiel unten.

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

Mit jQuery ist die Antwort, wenn Sie nicht viel darüber wissen. Es hat Funktionen, um Animationen wie die, die Sie machen möchten, zu machen. In this page Sie alle notwendigen Informationen, aber ich werde einen Ausschnitt setzen hier, um Sie zu machen sehen, was Sie in wenigen Minuten tun:

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>