So ändern Sie CSS-Keyframes in JS dynamisch

JS-Methode zum dynamischen Ändern von CSS-Keyframes: 1. Holen Sie sich das Link-Stylesheet und das Style-Stylesheet, die über die Schnittstelle „document.styleSheets“ auf der Webseite eingeführt werden. 2. Fügen Sie ein neues „@“ über „insertRule(rule,index )„Methoden-Keyframes“-Regel.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3-Version, DELL G3-Computer

Wie ändere ich CSS-Keyframes dynamisch mit js?

js ändert dynamisch @keyframes-Regeln in CSS3 6 Uhr. Wir stellen die @keyframes-Regel für die Drehung des Sekundenzeigers um einen Kreis ein Uhrrichtungrrree

dann muss die vorherige @keyframes-Regel von 0deg=>360deg in 180deg=>540deg geändert werden Dann tritt das Problem auf. Wir können die @keyframes nicht ändern Regeln im Stil jedes Mal

Hier müssen wir unsere js verwenden

	@keyframes rotate {
		   from{
		   	   transform: rotate(0deg);
		   }
           to{
               transform: rotate(360deg);
           }
	}

und fügt dann eine neue @keyframes-Regel ein durch die insertRule(rule,index)-Methode

	transform: rotate(180deg);

Auf diese Weise wird der von uns benötigte Effekt erzielt

Empfohlenes Lernen: „
css-Video-Tutorial

“

Das obige ist der detaillierte Inhalt vonSo ändern Sie CSS-Keyframes in JS dynamisch. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!