Comment agrandir l'image en cliquant sur la souris en CSS3-Questions et réponses frontales-php.cn

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

青灯夜游

Libérer： 2022-04-25 16:52:38

original

5378 Les gens l'ont consulté

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

Copier après la connexion

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>

Copier après la connexion

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!