Méthode d'implémentation : 1. Utilisez le sélecteur ":active" pour sélectionner l'état du clic de la souris sur l'image ; 2. Utilisez l'attribut de transformation et la fonction scale() pour obtenir l'effet d'agrandissement de l'image, la syntaxe "img:active {transformation : échelle (facteur de grossissement sur l'axe x), grossissement sur l'axe y) ;}".
L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.
css3 implémente le clic de souris pour agrandir l'image
Idée d'implémentation :
Utilisez le sélecteur ":active" pour sélectionner l'état du clic de souris sur l'image
Utilisez l'attribut de transformation et Fonction scale() pour obtenir l'effet d'agrandissement
Grammaire :
img:active {transform: scale(2,2);} Exemple d'implémentation :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style type="text/css">
img:active {
margin: 100px;
transform: scale(2, 2);
}
</style>
</head>
<body>
<img src="img/1.jpg" style="max-width:90%" / alt="Comment agrandir l'image en cliquant sur la souris en CSS3" >
</body>
</html>
Description :
L'explication anglaise d'active est "active", ce qui signifie cliquer sur la souris . Les exemples les plus courants de sélecteur actif sont probablement appliqués aux liens. Cependant, l'ouverture d'un lien est une action momentanée, qui ne reflète pas bien les caractéristiques du sélecteur actif.
La propriété Transform applique une transformation 2D ou 3D à un élément. Cette propriété vous permet de faire pivoter, mettre à l'échelle, déplacer, incliner, etc. l'élément. Lorsque cet attribut est utilisé avec la fonction scale(), l'élément d'attribut aura un effet de mise à l'échelle.
(Partage de vidéos d'apprentissage : tutoriel vidéo CSS, front-end web)
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
