Heim > Web-Frontend > CSS-Tutorial > 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

WBOY
Freigeben: 2021-11-18 16:11:50
Original
19398 Leute haben es durchsucht

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

So verwenden Sie CSS, um auf das Bild zu klicken, um es zu vergrößern

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>
Nach dem Login kopieren

Öffnen Sie die Datei test.html im Browser, um den Effekt zu sehen.

So verwenden Sie CSS, um auf das Bild zu klicken, um es zu vergrößern

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage