Heim > Artikel > Web-Frontend > So verwenden Sie CSS, um auf das Bild zu klicken, um es zu vergrößern
So verwenden Sie CSS, um auf das Bild zu klicken, um es zu vergrößern
- WBOYOriginal
- 2021-11-18 16:11:5019259Durchsuche
In CSS können Sie den Selektor und das Transformationsattribut „:active“ verwenden, um den Effekt zu erzielen, dass Sie auf das Bild klicken, um es zu vergrößern. Die Syntax lautet „picture element: active{transform:scale(width magnification, height lunification); }".
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
So verwenden Sie CSS, um ein Bild zu vergrößern, indem Sie darauf klicken
Erstellen Sie eine neue HTML-Datei und nennen Sie sie test.html, um zu erklären, wie Sie CSS verwenden, um das Bild zu verdoppeln, wenn Sie mit der Maus klicken.
Verwenden Sie im CSS-Tag das Transformationsattribut und setzen Sie die beiden Parameter des Scale-Attributs auf 2, um die Bildgröße zu verdoppeln. transform:scale(2,2); definiert eine 2D-Skalierungstransformation.
Verwenden Sie :active selector. :active selector wird verwendet, um aktive Links auszuwählen. Das heißt, der Vorgang wird ausgeführt, wenn auf das Bild geklickt wird.
Der Beispielcode lautet wie folgt:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<style type="text/css">
div{
width:350px;
height:250px;
background:url(1118.01.png);
}
div:active{
margin:100px;
transform:scale(2,2);
}
</style>
<div></div>
</body>
</html>Öffnen Sie die Datei test.html im Browser, um den Effekt zu sehen.
Weitere Programmierkenntnisse finden Sie unter: Programmiervideo! !
Das obige ist der detaillierte Inhalt vonSo verwenden Sie CSS, um auf das Bild zu klicken, um es zu vergrößern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!