Comment changer dynamiquement les images clés CSS dans js

Méthode JS pour modifier dynamiquement les images clés CSS : 1. Obtenez la feuille de style de lien et la feuille de style introduites sur la page Web via l'interface "document.styleSheets" 2. Insérez un nouveau "@ via "insertRule(rule,index); )" règle des images clés de la méthode".

L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3, ordinateur DELL G3

Comment changer dynamiquement les images clés css avec js ?

js modifie dynamiquement les règles @keyframes en CSS3

Voici une petite démo d'une horloge Le matériel donné est le suivant :

La direction initiale de la trotteuse est vers. 6 heures. Nous définissons la règle @keyframes pour que la trotteuse tourne d'un cercle

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

Ce réglage peut effectuer une rotation normalement, mais si nous changeons la position initiale de la trotteuse, par exemple en la réglant à 12 heures. 'direction de l'horloge

	transform: rotate(180deg);

alors la règle @keyframes précédente doit être modifiée de 0deg=> ; 360deg est convertie en 180deg=>540deg

Ensuite, le problème se pose. Cette modification n'est pas dynamique Nous ne pouvons pas modifier les règles @keyframes. dans le style à chaque fois
Ici, nous devons utiliser notre js

Passez d'abord le document L'interface .styleSheets obtient la feuille de style de lien et la feuille de style de style introduites sur la page Web

	var style = document.styleSheets[0];

puis insère une nouvelle règle @keyframes via la méthode insertRule(rule,index)

	var newdeg = 540;
	style.insertRule("@keyframes secondrotate {to{transform: rotate(" + newdeg + "deg);}}",4);

De cette façon, l'effet dont nous avons besoin est obtenu

Apprentissage recommandé : "Tutoriel vidéo CSS"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!