Maison  >  Article  >  interface Web  >  Comment agrandir l'image en cliquant sur la souris en CSS3

Comment agrandir l'image en cliquant sur la souris en CSS3

青灯夜游
青灯夜游original
2022-04-25 16:52:385472parcourir

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) ;}".

Comment agrandir l'image en cliquant sur la souris en CSS3

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>

Comment agrandir limage en cliquant sur la souris en CSS3

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn