Les méthodes de déclenchement sont : 1. Déclenchées par l'élément de pseudo-classe ":hover", la syntaxe est "element {transition : temps de transition de l'attribut} element:hover {attribut : valeur de l'attribut}" ; Via "element.classList L'instruction .add("element name")" déclenche l'effet de transition CSS.
L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.
Le premier type : Déclenché par des éléments de pseudo-classe
<style> .box{ width: 100px; height: 100px; background-color: blueviolet; transition: width 1s linear .5s; } .box:hover{ width: 400px; } </style> <p class="box"> </p>
Le deuxième type : Déclenché par JS
Ajouter via js et il doit y avoir un certain délai (suppression du délai n'a aucun effet) Changer le style des éléments
<style> .box{ width: 100px; height: 100px; background-color: blueviolet; transition: width 1s linear .5s; } .box1{ width: 400px; }</style> <p class="box"> </p> <scrpit> setTimeout(() => { let element = document.getElementsByClassName('box')[0]; element.classList.add('box1') }, 1) </scrpit>
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!