Heim  >  Artikel  >  Web-Frontend  >  So vergrößern Sie das Bild durch Klicken mit der Maus in CSS3

So vergrößern Sie das Bild durch Klicken mit der Maus in CSS3

青灯夜游
青灯夜游Original
2022-04-25 16:52:385502Durchsuche

Implementierungsmethode: 1. Verwenden Sie den Selektor „:active“, um den Status des Mausklicks auf das Bild auszuwählen. 2. Verwenden Sie das Transformationsattribut und die Funktion „scale()“, um den Bildvergrößerungseffekt zu erzielen, die Syntax „img:active“. {transformieren: Skala(x-Achsen-Vergrößerungsfaktor), y-Achsen-Vergrößerung);}".

So vergrößern Sie das Bild durch Klicken mit der Maus in CSS3

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

css3 implementiert Mausklick, um das Bild zu vergrößern

Implementierungsidee:

  • Verwenden Sie den Selektor „:aktiv“, um den Status des Mausklicks auf das Bild auszuwählen Funktion „scale()“, um den Vergrößerungseffekt zu erzielen . Das häufigste Beispiel für den aktiven Selektor ist wahrscheinlich die Anwendung auf Links. Das Öffnen eines Links ist jedoch eine vorübergehende Aktion, die die Eigenschaften des aktiven Selektors nicht gut widerspiegelt.

  • Transform-Eigenschaft wendet eine 2D- oder 3D-Transformation auf ein Element an. Mit dieser Eigenschaft können Sie das Element drehen, skalieren, verschieben, neigen usw. Wenn dieses Attribut zusammen mit der Funktion „scale()“ verwendet wird, wird das Attributelement skaliert.
  • (Lernvideo-Sharing:

    CSS-Video-Tutorial
  • ,
Web-Frontend

)

Das obige ist der detaillierte Inhalt vonSo vergrößern Sie das Bild durch Klicken mit der Maus in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
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